@dxos/react-ui-form 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/dist/lib/node-esm/index.mjs

@@ -1,89 +1,13 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
-// src/translations.ts
-var translationKey = "@dxos/react-ui-form";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "fields label": "Fields",
-        "hidden fields label": "Hidden Fields",
-        "empty readonly ref field label": "(none)",
-        // TODO(burdon): Standardize field/property.
-        "add property button label": "Add property",
-        "field property label": "Property",
-        "field property placeholder": "Property name",
-        "field format label": "Type",
-        "field path label": "Field path",
-        "add field": "Add field",
-        "delete field": "Delete field",
-        "field limit reached": "Maximum number of fields reached",
-        "boolean input true value": "Yes",
-        "boolean input false value": "No",
-        "show field label": "Show field",
-        "hide field label": "Hide field",
-        "delete field label": "Delete field",
-        "ref field combobox input placeholder": "Search\u2026",
-        "ref field placeholder_one": "Select\u2026",
-        "ref field placeholder_other": "Select items\u2026",
-        "example placeholder": "Example",
-        "latitude placeholder": "Latitude (e.g., 40.7128)",
-        "longitude placeholder": "Longitude (e.g., -74.0060)",
-        "cancel button label": "Cancel",
-        "save button label": "Save",
-        // FormatEnum
-        "format boolean": "Boolean",
-        "format currency": "Currency",
-        "format date": "Date",
-        "format date-time": "DateTime",
-        "format did": "DID",
-        "format duration": "Duration",
-        "format dxn": "DXN",
-        "format email": "Email",
-        "format formula": "Formula",
-        "format hostname": "Hostname",
-        "format integer": "Integer",
-        "format json": "JSON",
-        "format lnglat": "Geopoint",
-        "format markdown": "Markdown",
-        "format percent": "Percent",
-        "format ref": "Reference",
-        "format regex": "RegExp",
-        "format string": "String",
-        "format single-select": "Select",
-        "format multi-select": "Multi-select",
-        "format text": "Long text",
-        "format time": "Time",
-        "format timestamp": "Timestamp",
-        "format user": "User",
-        "format number": "Number",
-        "format uri": "URI",
-        "format url": "URL",
-        "format uuid": "UUID",
-        // GeoPointField.
-        "latitude label": "Latitude",
-        "longitude label": "Longitude",
-        // SelectOptionsField.
-        "select option label": "Label",
-        "select option label placeholder": "Option label",
-        "select option color": "Color",
-        "select option delete": "Delete",
-        "select option add": "Add option",
-        // System schema message.
-        "system schema title": "System type",
-        "system schema description": "System type: cannot add or remove fields."
-      }
-    }
-  }
-];
-
 // src/components/FieldEditor/FieldEditor.tsx
-import React17, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
-import { Obj as Obj2 } from "@dxos/echo";
-import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
+import React20, { useCallback as useCallback16, useEffect as useEffect5, useMemo as useMemo10, useState as useState6 } from "react";
+import { Filter as Filter2, Obj as Obj4, Type as Type4 } from "@dxos/echo";
+import { Format as Format6, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log2 } from "@dxos/log";
-import { useAsyncEffect, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { useAsyncEffect, useTranslation as useTranslation10 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
+import { translationKey as translationKey10 } from "#translations";
 
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
@@ -206,6 +130,46 @@ var pathNotUniqueError = (path) => ({
   message: `'${path}' is already present`
 });
 
+// src/util/field-type.ts
+import * as SchemaAST from "effect/SchemaAST";
+import { getAnnotation, isLiteralUnion } from "@dxos/effect";
+var detectFieldType = (ast) => {
+  if (isLiteralUnion(ast)) {
+    return "select";
+  }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return "struct";
+  }
+  switch (ast._tag) {
+    case "BooleanKeyword":
+      return "boolean";
+    case "StringKeyword":
+      return "string";
+    case "NumberKeyword":
+      return "number";
+  }
+  return void 0;
+};
+var getSelectOptionsFromAst = (ast) => {
+  if (!isLiteralUnion(ast)) {
+    return void 0;
+  }
+  return ast.types.flatMap((literalNode) => {
+    const value3 = literalNode.literal;
+    if (typeof value3 !== "string" && typeof value3 !== "number") {
+      return [];
+    }
+    const title = getAnnotation(SchemaAST.TitleAnnotationId, false)(literalNode);
+    const label = title ?? (typeof value3 === "string" ? value3.charAt(0).toUpperCase() + value3.slice(1) : String(value3));
+    return [
+      {
+        value: value3,
+        label
+      }
+    ];
+  });
+};
+
 // src/util/formatting.ts
 import { format as formatDate } from "date-fns/format";
 import { Format as Format2, GeoLocation as GeoLocation2, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
@@ -346,51 +310,85 @@ var formatForEditing = ({ type, format, value: value3, locale = void 0 }) => {
 
 // src/util/properties.ts
 import * as Option from "effect/Option";
+import * as SchemaAST2 from "effect/SchemaAST";
 import { Annotation } from "@dxos/echo";
-import { getProperties } from "@dxos/effect";
+import { getProperties, isArrayType, isNestedType } from "@dxos/effect";
+var unwrapOptional = (prop) => {
+  if (!prop.isOptional || !SchemaAST2.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] : SchemaAST2.Union.make(defined, prop.type.annotations);
+};
 var getFormProperties = (ast) => {
-  return getProperties(ast).filter((prop) => Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)));
+  const signatures = SchemaAST2.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 getProperties(ast).filter((prop) => !hidden.has(prop.name)).map((prop) => {
+    const raw = rawByName.get(prop.name);
+    return raw && (isNestedType(raw) || isArrayType(raw)) ? {
+      ...prop,
+      type: raw
+    } : prop;
+  });
 };
 
 // src/util/refs.ts
 import { Ref } from "@dxos/echo";
-import { getArrayElementType, isArrayType } from "@dxos/effect";
+import { ReferenceAnnotationId } from "@dxos/echo/internal";
+import { findAnnotation, getArrayElementType, isArrayType as isArrayType2 } from "@dxos/effect";
 var getRefProps = (ast) => {
-  if (isArrayType(ast)) {
+  if (isArrayType2(ast)) {
     const elementType = getArrayElementType(ast);
     if (elementType) {
       if (Ref.isRefType(elementType)) {
+        const typename = findAnnotation(elementType, ReferenceAnnotationId)?.typename;
         return {
           ast: elementType,
-          isArray: true
+          isArray: true,
+          typename
         };
       }
     }
   }
   if (Ref.isRefType(ast)) {
+    const typename = findAnnotation(ast, ReferenceAnnotationId)?.typename;
     return {
       ast,
-      isArray: false
+      isArray: false,
+      typename
     };
   }
   return void 0;
 };
 
 // src/components/Form/fields/ArrayField.tsx
-import * as Option3 from "effect/Option";
-import * as SchemaAST3 from "effect/SchemaAST";
-import React5, { useCallback as useCallback3 } from "react";
-import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import * as Option6 from "effect/Option";
+import * as SchemaAST6 from "effect/SchemaAST";
+import React6, { useCallback as useCallback3 } from "react";
+import { Ref as Ref2 } from "@dxos/echo";
+import { createJsonPath as createJsonPath6, findNode as findNode3, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType3 } from "@dxos/effect";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { translationKey as translationKey3 } from "#translations";
 
 // src/components/Form/Form.tsx
-import { createContext } from "@radix-ui/react-context";
-import * as Schema2 from "effect/Schema";
-import * as SchemaAST2 from "effect/SchemaAST";
-import React4, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
-import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
-import { IconButton, ScrollArea, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import * as Option5 from "effect/Option";
+import * as Schema3 from "effect/Schema";
+import * as SchemaAST5 from "effect/SchemaAST";
+import React5, { useEffect as useEffect2, useMemo as useMemo5, useRef } from "react";
+import { Annotation as EchoAnnotation, Type } from "@dxos/echo";
+import { createJsonPath as createJsonPath5, getValue as getValue$2 } from "@dxos/effect";
+import { Column, IconButton as IconButton2, Input as Input3, ScrollArea, useMergeRefs, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { composable, composableProps, withColumn } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { translationKey as translationKey2 } from "#translations";
 
 // src/hooks/useFormHandler.ts
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -428,12 +426,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("validate", {
       values: values2,
       errors: errors2
-    }, {
-      F: __dxlog_file,
-      L: 155,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 42, S: void 0 });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -521,12 +514,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("onValueChange", {
       path,
       value: value3
-    }, {
-      F: __dxlog_file,
-      L: 254,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 138, S: void 0 });
     const jsonPath = createJsonPath(path);
     const pathArray = path;
     let parsedValue = value3;
@@ -535,12 +523,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
         parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 264,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 150, S: void 0 });
       parsedValue = void 0;
     }
     const newValues = mergeAtPath(values, pathArray, parsedValue);
@@ -624,18 +607,18 @@ var mergeAtPath = (obj, path, value3) => {
   if (path.length === 0) {
     return value3;
   }
-  const [head2, ...rest] = path;
-  const child = rest.length === 0 ? value3 : mergeAtPath(obj?.[head2], rest, value3);
+  const [head, ...rest] = path;
+  const child = rest.length === 0 ? value3 : mergeAtPath(obj?.[head], rest, value3);
   if (Array.isArray(obj)) {
     const copy = [
       ...obj
     ];
-    copy[head2] = child;
+    copy[head] = child;
     return copy;
   }
   return {
     ...obj,
-    [head2]: child
+    [head]: child
   };
 };
 var flatMap = (errors) => {
@@ -649,9 +632,9 @@ var flatMap = (errors) => {
 };
 
 // src/hooks/useKeyHandler.tsx
-import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useCallback as useCallback2, useLayoutEffect } from "react";
 import { addEventListener } from "@dxos/async";
-var useKeyHandler = (formElement, form) => {
+var useKeyHandler = (elRef, form) => {
   const handleKeyDown = useCallback2((event) => {
     switch (event.key) {
       case "Enter": {
@@ -667,29 +650,45 @@ var useKeyHandler = (formElement, form) => {
     form.onSave,
     form.autoSave
   ]);
-  useEffect2(() => {
-    if (!formElement) {
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) {
       return;
     }
-    return addEventListener(formElement, "keydown", handleKeyDown);
+    return addEventListener(el, "keydown", handleKeyDown);
   }, [
-    formElement,
+    elRef,
     handleKeyDown
   ]);
 };
 
 // src/components/Form/FormFieldComponent.tsx
+import { format as formatDate2 } from "date-fns";
 import React, { Component } from "react";
+import { Format as Format3 } from "@dxos/echo";
 import { Icon, Input, Tooltip } from "@dxos/react-ui";
-import { inputTextLabel } from "@dxos/ui-theme";
-var FormFieldLabel = ({ label, error, readonly, asChild }) => {
+import { inputTextLabel } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+
+// src/components/Form/FormTooltipsContext.ts
+import { createContext, useContext } from "react";
+var FormTooltipsContext = createContext(true);
+var useFormTooltips = () => useContext(FormTooltipsContext);
+
+// src/components/Form/FormFieldComponent.tsx
+var FormFieldLabel = ({ label, error, readonly, asChild, path }) => {
+  const tooltips = useFormTooltips();
   const Label = readonly || asChild ? "span" : Input.Label;
+  const labelNode = /* @__PURE__ */ React.createElement(Label, {
+    className: mx(inputTextLabel, "text-sm")
+  }, label);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: "flex items-center justify-between"
-  }, /* @__PURE__ */ React.createElement(Label, {
-    className: inputTextLabel
-  }, label), error && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  }, tooltips && path ? /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: path,
+    side: "bottom"
+  }, labelNode) : labelNode, error && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true,
     content: error,
     side: "bottom"
@@ -700,26 +699,48 @@ var FormFieldLabel = ({ label, error, readonly, asChild }) => {
   })));
 };
 FormFieldLabel.displayName = "Form.FieldLabel";
+var formatStaticValue = (value3, format) => {
+  if (value3 == null) {
+    return "";
+  }
+  switch (format) {
+    case Format3.TypeFormat.DateTime:
+    case Format3.TypeFormat.Date:
+    case Format3.TypeFormat.Time: {
+      const date = new Date(value3);
+      if (Number.isNaN(date.getTime())) {
+        return String(value3);
+      }
+      const pattern = format === Format3.TypeFormat.DateTime ? "PPp" : format === Format3.TypeFormat.Date ? "PP" : "p";
+      return formatDate2(date, pattern);
+    }
+    default:
+      return String(value3);
+  }
+};
 var FormFieldWrapper = (props) => {
-  const { children, readonly, layout, label, getStatus, getValue } = props;
+  const { children, readonly, layout, label, jsonPath, format, getStatus, getValue } = props;
   const { status, error } = getStatus();
   const value3 = getValue();
   if (layout === "static" && value3 == null) {
     return null;
   }
-  const str = String(value3 ?? "");
+  const str = formatStaticValue(value3, format);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: "contents"
   }, /* @__PURE__ */ React.createElement(Input.Root, {
     validationValence: status
   }, layout !== "inline" && /* @__PURE__ */ React.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), layout === "static" ? /* @__PURE__ */ React.createElement("p", null, str) : children ? children({
+    label,
+    path: jsonPath
+  }), layout === "static" ? /* @__PURE__ */ React.createElement("p", {
+    className: "truncate min-w-0",
+    title: str
+  }, str) : children ? children({
     value: value3
-  }) : null, layout === "full" && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Validation, null, error))));
+  }) : null, layout === "full" && error && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Validation, null, error))));
 };
 var FormFieldErrorBoundary = class extends Component {
   static getDerivedStateFromError(error) {
@@ -738,9 +759,9 @@ var FormFieldErrorBoundary = class extends Component {
   render() {
     if (this.state.error) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: "flex gap-2 border border-rose-fill font-mono text-sm"
+        className: "flex gap-2 border border-rose-bg font-mono text-sm"
       }, /* @__PURE__ */ React.createElement("span", {
-        className: "bg-rose-fill text-surface-text px-1 font-thin"
+        className: "bg-rose-bg text-base-fg px-1 font-thin"
       }, "ERROR"), String(this.props.path?.join(".")));
     }
     return this.props.children;
@@ -753,20 +774,22 @@ var FormFieldErrorBoundary = class extends Component {
 };
 
 // src/components/Form/FormFieldSet.tsx
-import React3, { forwardRef, useMemo as useMemo3 } from "react";
-import { mx } from "@dxos/ui-theme";
-import { isTruthy } from "@dxos/util";
+import * as Option4 from "effect/Option";
+import React4, { useMemo as useMemo4 } from "react";
+import { createJsonPath as createJsonPath4 } from "@dxos/effect";
 
 // src/components/Form/FormField.tsx
 import * as Match from "effect/Match";
 import * as Option2 from "effect/Option";
 import * as Schema from "effect/Schema";
-import * as SchemaAST from "effect/SchemaAST";
+import * as SchemaAST3 from "effect/SchemaAST";
 import * as String2 from "effect/String";
 import React2, { useMemo as useMemo2 } from "react";
-import { Format as Format3 } from "@dxos/echo";
-import { createJsonPath as createJsonPath2, findNode, getAnnotation, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion, isNestedType } from "@dxos/effect";
-import { useTranslation } from "@dxos/react-ui";
+import { Annotation as Annotation2, Format as Format4 } from "@dxos/echo";
+import { createJsonPath as createJsonPath2, findNode, getAnnotation as getAnnotation2, getDiscriminatedType, isArrayType as isArrayType3, isDiscriminatedUnion, isLiteralUnion as isLiteralUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 var FormField = (props) => {
   const {
     type,
@@ -778,51 +801,58 @@ var FormField = (props) => {
     readonly,
     layout,
     // RefFieldProps
+    createTypename,
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap: createFieldMap3,
     db,
-    schemaHook,
-    getOptions: getRefOptions,
+    useType: schemaHook,
+    getOptions,
     onCreate
   } = props;
   const { t } = useTranslation(translationKey);
-  const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
-  const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
-  const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
-  const label = useMemo2(() => title ?? String2.capitalize(name), [
+  const title = getAnnotation2(SchemaAST3.TitleAnnotationId)(type);
+  const description = getAnnotation2(SchemaAST3.DescriptionAnnotationId)(type);
+  const examples = getAnnotation2(SchemaAST3.ExamplesAnnotationId)(type);
+  const label = useMemo2(() => title ?? (name == null ? "" : String2.capitalize(name)), [
     title,
     name
   ]);
-  const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
+  const placeholder = useMemo2(() => examples?.length ? `${t("example.placeholder")}: ${examples[0]}` : description ?? label, [
     examples,
     description,
     label
   ]);
   const fieldState = useFormFieldState(FormField.displayName, path);
+  const jsonPath = createJsonPath2(path ?? []);
   const fieldProps = {
     type,
-    format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
+    format: Format4.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
     readonly,
     label,
+    jsonPath,
     placeholder,
     layout,
+    db,
     ...fieldState
   };
-  const jsonPath = createJsonPath2(path ?? []);
+  if (readonly && fieldState.getValue() == null) {
+    return null;
+  }
   const CustomField = fieldMap?.[jsonPath];
   if (CustomField) {
     return /* @__PURE__ */ React2.createElement(CustomField, fieldProps);
   }
   const component = fieldProvider?.({
     schema: Schema.make(type),
-    prop: name,
+    prop: name ?? "",
     fieldProps
   });
   if (component) {
     return component;
   }
-  if (isArrayType2(type)) {
+  if (isArrayType3(type)) {
     return /* @__PURE__ */ React2.createElement(ArrayField, {
       fieldProps: fieldState,
       label,
@@ -833,7 +863,7 @@ var FormField = (props) => {
   if (Field) {
     return /* @__PURE__ */ React2.createElement(Field, fieldProps);
   }
-  const options = getOptions(type);
+  const options = getSelectOptions(type);
   if (options) {
     const fieldProjections = projection?.getFieldProjections();
     const fieldProjection = fieldProjections?.find((fp) => fp.field.path === name);
@@ -851,24 +881,36 @@ var FormField = (props) => {
   }
   const refProps = getRefProps(type);
   if (refProps) {
+    const inline = Annotation2.FormInlineAnnotation.getFromAst(refProps.ast).pipe(Option2.getOrElse(() => false));
+    if (inline && !refProps.isArray) {
+      return /* @__PURE__ */ React2.createElement(InlineRefField, {
+        ...fieldProps,
+        ...refProps,
+        db,
+        useType: schemaHook,
+        onCreate
+      });
+    }
+    const isCreateTarget = !createTypename || refProps.typename === createTypename;
     return /* @__PURE__ */ React2.createElement(RefField, {
       ...fieldProps,
       ...refProps,
-      createOptionLabel,
-      createOptionIcon,
-      createInitialValuePath,
+      createOptionLabel: isCreateTarget ? createOptionLabel : void 0,
+      createOptionIcon: isCreateTarget ? createOptionIcon : void 0,
+      createInitialValuePath: isCreateTarget ? createInitialValuePath : void 0,
+      createFieldMap: isCreateTarget ? createFieldMap3 : void 0,
       db,
-      schemaHook,
-      getOptions: getRefOptions,
+      useType: schemaHook,
+      getOptions,
       onCreate
     });
   }
-  if (isNestedType(type)) {
+  if (isNestedType2(type)) {
     const baseNode = findNode(type, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST3.isTypeLiteral);
     if (typeLiteral) {
       const schema = Schema.make(typeLiteral);
-      return /* @__PURE__ */ React2.createElement(FormFieldSet, {
+      return /* @__PURE__ */ React2.createElement(Nesting, null, /* @__PURE__ */ React2.createElement(FormFieldSet, {
         schema,
         path,
         readonly,
@@ -881,17 +923,33 @@ var FormField = (props) => {
         createOptionIcon,
         createInitialValuePath,
         db,
-        schemaHook,
-        getOptions: getRefOptions,
+        useType: schemaHook,
+        getOptions,
         onCreate
-      });
+      }));
     }
   }
   return null;
 };
 FormField.displayName = "Form.FormField";
+var Nesting = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+  className: "px-2 border border-subdued-separator rounded-sm mt-2"
+}, /* @__PURE__ */ React2.createElement("div", {
+  className: "pb-2"
+}, children));
+var IconBlock = ({ inline, ...props }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx2("h-full flex px-1", inline ? "items-center" : "flex-col pt-2.5")
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    variant: "ghost",
+    density: "xs",
+    square: true,
+    iconOnly: true,
+    ...props
+  }));
+};
 var getFormField = ({ type, format }) => {
-  const formatField = Match.value(format).pipe(Match.withReturnType(), Match.when(Format3.TypeFormat.GeoPoint, () => GeoPointField), Match.when(Format3.TypeFormat.Markdown, () => MarkdownField), Match.when(Format3.TypeFormat.Text, () => TextAreaField), Match.orElse(() => void 0));
+  const formatField = Match.value(format).pipe(Match.withReturnType(), Match.when(Format4.TypeFormat.Date, () => DateField), Match.when(Format4.TypeFormat.DateTime, () => DateField), Match.when(Format4.TypeFormat.GeoPoint, () => GeoPointField), Match.when(Format4.TypeFormat.Markdown, () => MarkdownField), Match.when(Format4.TypeFormat.Text, () => TextAreaField), Match.when(Format4.TypeFormat.Time, () => DateField), Match.orElse(() => void 0));
   if (formatField) {
     return formatField;
   }
@@ -906,67 +964,327 @@ var getFormField = ({ type, format }) => {
       return BooleanField;
   }
 };
-var getOptions = (ast) => {
-  if (isLiteralUnion(ast)) {
+var getSelectOptions = (ast) => {
+  if (isLiteralUnion2(ast)) {
     return ast.types.map((type) => type.literal).filter((v) => v !== null);
   }
-  return Format3.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option2.getOrUndefined(annotation));
+  return Format4.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option2.getOrUndefined(annotation));
 };
 
-// src/components/Form/FormFieldSet.tsx
-var FORM_FIELDSET_NAME = "Form.FieldSet";
-var FormFieldSet = /* @__PURE__ */ forwardRef(({ label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
-  const values = useFormValues(FORM_FIELDSET_NAME, path);
-  const properties = useMemo3(() => {
-    if (!schema) {
-      return [];
+// src/components/Form/Layout/annotation.ts
+import { createAnnotationHelper } from "@dxos/echo/internal";
+var FormLayoutAnnotationId = /* @__PURE__ */ Symbol.for("@dxos/react-ui-form/annotation/Layout");
+var FormLayoutAnnotation = createAnnotationHelper(FormLayoutAnnotationId);
+var DEFAULT_LAYOUT_NAME = "default";
+
+// src/components/Form/Layout/FormLayout.tsx
+import * as Option3 from "effect/Option";
+import * as Schema2 from "effect/Schema";
+import * as SchemaAST4 from "effect/SchemaAST";
+import * as String3 from "effect/String";
+import React3, { Fragment, useMemo as useMemo3 } from "react";
+import { Annotation as Annotation3 } from "@dxos/echo";
+import { createJsonPath as createJsonPath3, findNode as findNode2, getAnnotation as getAnnotation3, getBaseType } from "@dxos/effect";
+import { Input as Input2 } from "@dxos/react-ui";
+
+// src/components/Form/Layout/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
+      });
     }
-    const props2 = getFormProperties(schema.ast);
-    if (projection) {
-      const fieldProjections = projection.getFieldProjections();
-      const hiddenProperties = new Set(projection.getHiddenProperties());
-      const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-      const orderedProps = [];
-      for (const fieldProjection of fieldProjections) {
-        const fieldPath = String(fieldProjection.field.path);
-        const prop = visibleProps.find((p) => p.name === fieldPath);
-        if (prop) {
-          orderedProps.push(prop);
-        }
+    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 value3 = attrs[key];
+  if (value3 === void 0) {
+    throw new LayoutParseError(`<${tag}> missing required attribute "${key}"`, position);
+  }
+  return value3;
+};
+var parseInteger = (value3, attr, tag, position) => {
+  if (!/^\d+$/.test(value3)) {
+    throw new LayoutParseError(`<${tag}> attribute "${attr}" expects an integer, got ${JSON.stringify(value3)}`, position);
+  }
+  return Number.parseInt(value3, 10);
+};
+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 projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
-      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
-      orderedProps.push(...remainingProps);
-      return orderedProps;
+      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
+      };
     }
-    const filtered = exclude ? exclude(props2) : props2;
-    return sort ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filtered;
-  }, [
+    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;
+};
+
+// src/components/Form/Layout/FormLayout.tsx
+var FORM_LAYOUT_NAME = "Form.Layout";
+var FormLayout = ({ schema, template, name = DEFAULT_LAYOUT_NAME, path, readonly, layout, projection, ...props }) => {
+  const annotated = Option3.getOrUndefined(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(", ") || "\u2205"})` : `no template provided and schema has no FormLayoutAnnotation`);
+  }
+  const tree = useMemo3(() => parseLayout(source), [
+    source
+  ]);
+  return /* @__PURE__ */ React3.createElement(RenderNode, {
+    node: tree,
+    schema,
+    basePath: path ?? [],
+    readonly,
+    layout,
+    projection,
+    ...props
+  });
+};
+FormLayout.displayName = FORM_LAYOUT_NAME;
+var RenderNode = ({ node, schema, basePath, ...props }) => {
+  if (node.kind === "grid") {
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: "grid gap-x-form-gap",
+      style: {
+        gridTemplateColumns: `repeat(${node.cols}, minmax(0, 1fr))`
+      }
+    }, node.children.map((child, index) => /* @__PURE__ */ React3.createElement(Fragment, {
+      key: index
+    }, /* @__PURE__ */ React3.createElement(RenderNode, {
+      node: child,
+      schema,
+      basePath,
+      ...props
+    }))));
+  }
+  const resolved = resolveLayoutField(schema, node.name);
+  if (!resolved) {
+    throw new LayoutParseError(`field "${node.name}" not found on schema`);
+  }
+  const { type, segments, leafName, title, labelType } = resolved;
+  const path = [
+    ...basePath,
+    ...segments
+  ];
+  const span = node.span ? {
+    gridColumn: `span ${node.span} / span ${node.span}`
+  } : void 0;
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "min-w-0",
+    style: span
+  }, /* @__PURE__ */ React3.createElement(FormFieldErrorBoundary, {
+    path
+  }, labelType ? /* @__PURE__ */ React3.createElement(LabelField, {
+    schema: Schema2.make(labelType),
+    label: title ?? String3.capitalize(leafName),
+    path,
+    layout: props.layout
+  }) : /* @__PURE__ */ React3.createElement(FormField, {
+    type,
+    name: leafName,
+    path,
+    ...props
+  })));
+};
+var resolvePropertySignature = (ast, segments) => {
+  let node = ast;
+  for (let index = 0; index < segments.length; index++) {
+    const typeLiteral = findNode2(node, SchemaAST4.isTypeLiteral);
+    if (!typeLiteral) {
+      return void 0;
+    }
+    const prop = SchemaAST4.getPropertySignatures(typeLiteral).find((p) => globalThis.String(p.name) === segments[index]);
+    if (!prop) {
+      return void 0;
+    }
+    if (index === segments.length - 1) {
+      return prop;
+    }
+    node = prop.type;
+  }
+  return void 0;
+};
+var resolveLayoutField = (schema, name) => {
+  const segments = name.split(".");
+  const prop = resolvePropertySignature(schema.ast, segments);
+  if (!prop) {
+    return void 0;
+  }
+  const { type: baseType } = getBaseType(prop);
+  const type = prop.annotations && Reflect.ownKeys(prop.annotations).length > 0 ? {
+    ...baseType,
+    annotations: {
+      ...baseType.annotations,
+      ...prop.annotations
+    }
+  } : baseType;
+  const title = getAnnotation3(SchemaAST4.TitleAnnotationId)(type);
+  const labelType = findNode2(prop.type, SchemaAST4.isTypeLiteral);
+  const labelled = labelType != null && Option3.isSome(Annotation3.LabelAnnotation.getFromAst(labelType));
+  return {
+    type,
+    segments,
+    leafName: segments[segments.length - 1],
+    title,
+    labelType: labelled ? labelType : void 0
+  };
+};
+var LabelField = ({ schema, label, path, layout }) => {
+  const { getValue } = useFormFieldState(FORM_LAYOUT_NAME, path);
+  const value3 = getValue();
+  const text = value3 == null ? void 0 : Annotation3.getLabelWithSchema(schema, value3);
+  if (text == null || text.trim().length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "contents"
+  }, /* @__PURE__ */ React3.createElement(Input2.Root, null, layout !== "inline" && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
+    readonly: true,
+    label,
+    path: createJsonPath3(path)
+  }), /* @__PURE__ */ React3.createElement("p", {
+    className: "truncate min-w-0",
+    title: text
+  }, text)));
+};
+
+// src/components/Form/FormFieldSet.tsx
+var FORM_FIELDSET_NAME = "Form.FieldSet";
+var FormFieldSet = ({ label, schema, readonly, path, sort, exclude, projection, layout, layoutName = DEFAULT_LAYOUT_NAME, ...props }) => {
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
+  const properties = useFormFieldSetProperties({
     schema,
     values,
     exclude,
     sort,
-    projection?.fields
-  ]);
+    projection
+  });
   if ((readonly || layout === "static") && values == null) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement("div", {
-    role: "form",
-    className: mx("w-full", layout === "inline" && "flex flex-col gap-2"),
-    ref: forwardRef4
-  }, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
+  const layouts = schema ? Option4.getOrUndefined(FormLayoutAnnotation.get(schema)) : void 0;
+  if (layouts?.[layoutName] !== void 0 && schema) {
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, layout !== "inline" && label && /* @__PURE__ */ React4.createElement(FormFieldLabel, {
+      label,
+      path: createJsonPath4(path ?? []),
+      asChild: true
+    }), /* @__PURE__ */ React4.createElement(FormLayout, {
+      schema,
+      name: layoutName,
+      path,
+      readonly,
+      layout,
+      projection,
+      ...props
+    }));
+  }
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, layout !== "inline" && label && /* @__PURE__ */ React4.createElement(FormFieldLabel, {
     label,
+    path: createJsonPath4(path ?? []),
     asChild: true
   }), properties.map((property) => {
     const name = property.name.toString();
-    return /* @__PURE__ */ React3.createElement(FormFieldErrorBoundary, {
+    return /* @__PURE__ */ React4.createElement(FormFieldErrorBoundary, {
       key: name,
       path: [
         ...path ?? [],
         name
       ]
-    }, /* @__PURE__ */ React3.createElement(FormField, {
+    }, /* @__PURE__ */ React4.createElement(FormField, {
       type: property.type,
       name,
       path: [
@@ -978,25 +1296,68 @@ var FormFieldSet = /* @__PURE__ */ forwardRef(({ label, schema, readonly, path,
       projection,
       ...props
     }));
-  }).filter(isTruthy));
-});
+  }));
+};
 FormFieldSet.displayName = FORM_FIELDSET_NAME;
+var useFormFieldSetProperties = ({ schema, exclude, projection, values, sort }) => {
+  return useMemo4(() => {
+    if (!schema) {
+      return [];
+    }
+    const schemaProps = getFormProperties(schema.ast);
+    const filteredProps = exclude ? exclude(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((prop2) => prop2.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
+        }
+      }
+      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.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,
+    exclude,
+    sort,
+    projection
+  ]);
+};
 
 // src/components/Form/Form.tsx
-var omitId = (schema) => schema.pipe(Schema2.omit("id"));
-var [FormContextProvider, useFormContext] = createContext("Form");
+var omitId = (schemaOrType) => {
+  const schema = Type.isType(schemaOrType) ? Type.getSchema(schemaOrType) : schemaOrType;
+  return schema.pipe(Schema3.omit("id"));
+};
+var omitHiddenFormFields = (schema) => {
+  const properties = SchemaAST5.getPropertySignatures(schema.ast);
+  const hidden = properties.filter((prop) => Option5.getOrElse(EchoAnnotation.FormInputAnnotation.getFromAst(prop.type), () => true) === false).map((prop) => prop.name);
+  return hidden.length === 0 ? schema : schema.pipe(Schema3.omit(...hidden));
+};
+var [FormContextProvider, useFormContext] = createContext2("Form");
 var useFormValues = (componentName, path, defaultValue) => {
-  const stablePath = useMemo4(() => path ?? [], [
+  const stablePath = useMemo5(() => path ?? [], [
     path ? path.join(".") : void 0
   ]);
-  const jsonPath = createJsonPath3(stablePath);
+  const jsonPath = createJsonPath5(stablePath);
   const { form: { values, onValueChange } } = useFormContext(componentName);
   const value3 = getValue$2(values, jsonPath);
   const lastAppliedPathRef = useRef(null);
-  useEffect3(() => {
+  useEffect2(() => {
     if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
       lastAppliedPathRef.current = jsonPath;
-      onValueChange(stablePath, SchemaAST2.stringKeyword, defaultValue());
+      onValueChange(stablePath, SchemaAST5.stringKeyword, defaultValue());
     }
   }, [
     value3,
@@ -1008,11 +1369,11 @@ var useFormValues = (componentName, path, defaultValue) => {
   return value3;
 };
 var useFormFieldState = (componentName, path = []) => {
-  const stablePath = useMemo4(() => path, [
+  const stablePath = useMemo5(() => path, [
     Array.isArray(path) ? path.join(".") : path
   ]);
   const { form: { getStatus, getValue, onBlur, onValueChange } } = useFormContext(componentName);
-  return useMemo4(() => ({
+  return useMemo5(() => ({
     getStatus: () => getStatus(stablePath),
     getValue: () => getValue(stablePath),
     onBlur: () => onBlur(stablePath),
@@ -1033,121 +1394,188 @@ var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
     onCancel,
     ...props
   });
-  return /* @__PURE__ */ React4.createElement(FormContextProvider, {
+  return /* @__PURE__ */ React5.createElement(FormTooltipsContext.Provider, {
+    value: props.tooltips ?? true
+  }, /* @__PURE__ */ React5.createElement(FormContextProvider, {
     form,
     ...props
-  }, children);
+  }, children));
 };
 FormRoot.displayName = "Form.Root";
 var FORM_VIEWPORT_NAME = "Form.Viewport";
-var FormViewport = ({ children, classNames, margin = true, padding = true, thin = true, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
-    orientation: "vertical",
-    classNames,
-    margin,
-    padding,
-    thin,
-    ...props
-  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
-};
+var FormViewport = composable(({ children, scroll, gutter = "sm", ...props }, forwardedRef) => {
+  const span = "[.dx-column-root_&]:col-span-full";
+  if (scroll) {
+    return /* @__PURE__ */ React5.createElement(Column.Root, {
+      gutter,
+      classNames: [
+        "dx-expander",
+        span
+      ]
+    }, /* @__PURE__ */ React5.createElement(ScrollArea.Root, {
+      ...composableProps(props),
+      orientation: "vertical",
+      centered: true,
+      padding: true,
+      thin: true,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, null, children)));
+  }
+  return /* @__PURE__ */ React5.createElement(Column.Root, {
+    ...composableProps(props),
+    gutter,
+    classNames: [
+      "w-full min-w-0",
+      span
+    ],
+    ref: forwardedRef
+  }, children);
+});
 FormViewport.displayName = FORM_VIEWPORT_NAME;
 var FORM_CONTENT_NAME = "Form.Content";
-var FormContent = ({ classNames, children }) => {
+var FormContent = composable(({ children, ...props }, forwardedRef) => {
   const { form, testId } = useFormContext(FORM_CONTENT_NAME);
-  const ref = useRef(null);
-  useKeyHandler(ref.current, form);
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    role: "form",
-    className: mx2("w-full flex flex-col gap-form-padding", classNames),
-    "data-testid": testId
+  const localRef = useRef(null);
+  const mergedRef = useMergeRefs([
+    forwardedRef,
+    localRef
+  ]);
+  useKeyHandler(localRef, form);
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps(props, {
+      role: "form",
+      classNames: mx3(withColumn.center(), "flex flex-col w-full")
+    }),
+    "data-testid": testId,
+    ref: mergedRef
   }, children);
-};
+});
 FormContent.displayName = FORM_CONTENT_NAME;
 var FORM_FIELDSET_NAME2 = "Form.FieldSet";
 var FormFieldSet2 = (props) => {
   const { form, ...contextProps } = useFormContext(FORM_FIELDSET_NAME2);
-  return /* @__PURE__ */ React4.createElement(FormFieldSet, {
+  return /* @__PURE__ */ React5.createElement(FormFieldSet, {
     schema: form.schema,
     ...contextProps,
     ...props
   });
 };
 FormFieldSet2.displayName = FORM_FIELDSET_NAME2;
+var FORM_LAYOUT_NAME2 = "Form.Layout";
+var FormLayout2 = ({ schema, ...props }) => {
+  const { form, ...contextProps } = useFormContext(FORM_LAYOUT_NAME2);
+  const resolvedSchema = schema ?? form.schema;
+  if (!resolvedSchema) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(FormLayout, {
+    schema: resolvedSchema,
+    ...contextProps,
+    ...props
+  });
+};
+FormLayout2.displayName = FORM_LAYOUT_NAME2;
 var FORM_ACTIONS_NAME = "Form.Actions";
 var FormActions = ({ classNames }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: mx2("grid grid-flow-col gap-2 auto-cols-fr py-form-padding", classNames)
-  }, onCancel && /* @__PURE__ */ React4.createElement(IconButton, {
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: mx3(withColumn.center(), "grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding", classNames)
+  }, onCancel && /* @__PURE__ */ React5.createElement(IconButton2, {
     icon: "ph--x--regular",
     iconEnd: true,
-    label: t("cancel button label"),
+    label: t("cancel-button.label"),
     onClick: onCancel,
     "data-testid": "cancel-button"
-  }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
+  }), onSave && /* @__PURE__ */ React5.createElement(IconButton2, {
     type: "submit",
     variant: "primary",
     disabled: !canSave,
     icon: "ph--check--regular",
     iconEnd: true,
-    label: t("save button label"),
+    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, label, description, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps(props, {
+      classNames: "flex flex-col pt-form-section-gap first:pt-0"
+    }),
+    ref: forwardedRef
+  }, label && /* @__PURE__ */ React5.createElement("h2", {
+    className: "text-lg"
+  }, label), description && /* @__PURE__ */ React5.createElement("p", {
+    className: "text-description"
+  }, description), children);
+});
+FormSection.displayName = FORM_SECTION_NAME;
 var FORM_SUBMIT_NAME = "Form.Submit";
 var FormSubmit = ({ classNames, label, icon, disabled }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: mx2("flex w-full pt-form-padding", classNames)
-  }, /* @__PURE__ */ React4.createElement(IconButton, {
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: mx3("flex w-full pt-form-padding", classNames)
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
     classNames: "w-full",
     type: "submit",
     variant: "primary",
     disabled: disabled ?? !canSave,
     icon: icon ?? "ph--check--regular",
-    label: label ?? t("save button label"),
+    label: label ?? t("save-button.label"),
     onClick: onSave,
     "data-testid": "save-button"
   }));
 };
 FormSubmit.displayName = FORM_SUBMIT_NAME;
+var FORM_ERROR_NAME = "Form.Error";
+var FormError = ({ children, classNames }) => {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(Input3.Root, {
+    validationValence: "error"
+  }, /* @__PURE__ */ React5.createElement(Input3.Validation, {
+    classNames
+  }, children));
+};
+FormError.displayName = FORM_ERROR_NAME;
 var Form = {
   Root: FormRoot,
   Viewport: FormViewport,
   Content: FormContent,
+  Section: FormSection,
   FieldSet: FormFieldSet2,
+  Layout: FormLayout2,
   Label: FormFieldLabel,
   Actions: FormActions,
-  Submit: FormSubmit
+  Submit: FormSubmit,
+  Error: FormError
 };
 
 // src/components/Form/fields/ArrayField.tsx
 var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
-  const { t } = useTranslation3(translationKey);
+  const { t } = useTranslation3(translationKey3);
   const elementType = getArrayElementType2(type);
   const { onValueChange } = inputProps;
   const values = useFormValues(ArrayField.displayName, path, () => []);
   const getDefaultObjectValue = (typeNode) => {
-    const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
-    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
+    const baseNode = findNode3(typeNode, isDiscriminatedUnion2);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode3(typeNode, SchemaAST6.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
     return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-      const defaultValue = SchemaAST3.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      const defaultValue = SchemaAST6.getDefaultAnnotation(prop.type).pipe((annotation) => Option6.getOrUndefined(annotation));
       return [
         prop.name,
         defaultValue
@@ -1155,9 +1583,9 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
     }));
   };
   const handleAdd = useCallback3(() => {
-    const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    values && onValueChange(type, [
-      ...values,
+    const defaultValue = isNestedType3(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    onValueChange(type, [
+      ...values ?? [],
       defaultValue
     ]);
   }, [
@@ -1176,47 +1604,49 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
   if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React5.createElement(FormFieldLabel, {
+  const renderItemAsObject = elementType && isNestedType3(elementType) && !Ref2.isRefType(elementType);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React6.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, /* @__PURE__ */ React6.createElement(FormFieldLabel, {
     readonly,
     label,
+    path: createJsonPath6(path ?? []),
     asChild: true
-  }), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-2"
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement(IconBlock, {
+    inline: true,
+    icon: "ph--plus--regular",
+    label: t("add-item.button"),
+    onClick: handleAdd
+  })), /* @__PURE__ */ React6.createElement("div", {
+    className: "flex flex-col"
   }, values?.map((_, index) => {
-    return /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
-      key: index,
-      className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
-    }, /* @__PURE__ */ React5.createElement(FormField, {
-      autoFocus: index === values.length - 1,
+    const isLast = index === values.length - 1;
+    const fieldField = /* @__PURE__ */ React6.createElement(FormField, {
+      ...props,
+      autoFocus: isLast,
       type: elementType,
+      ...renderItemAsObject && {
+        name: null
+      },
       path: [
         ...path ?? [],
         index
       ],
       readonly: readonly || layout === "static",
-      layout: "inline",
-      ...props
-    }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
-      className: "flex flex-col h-full justify-end"
-    }, /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
-      className: "flex items-center h-[2rem]"
-    }, /* @__PURE__ */ React5.createElement(IconButton2, {
+      layout: renderItemAsObject ? layout === "static" ? "static" : void 0 : "inline"
+    });
+    return /* @__PURE__ */ React6.createElement("div", {
+      key: index,
+      className: "grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap"
+    }, fieldField, !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement(IconBlock, {
+      inline: !renderItemAsObject,
       icon: "ph--x--regular",
-      iconOnly: true,
-      label: t("button remove"),
-      onClick: () => handleDelete(index),
-      classNames: "self-center"
-    }))));
-  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
-    classNames: "flex w-full",
-    icon: "ph--plus--regular",
-    label: t("add field"),
-    onClick: handleAdd
-  }));
+      label: t("remove-item.button"),
+      onClick: () => handleDelete(index)
+    }));
+  })));
 };
 ArrayField.displayName = "Form.ArrayField";
 var getDefaultValue = (ast) => {
@@ -1234,7 +1664,7 @@ var getDefaultValue = (ast) => {
       return getDefaultValue(ast.f());
     }
     default: {
-      if (ast && isNestedType2(ast)) {
+      if (ast && isNestedType3(ast)) {
         return {};
       } else {
         throw new Error(`Unsupported type: ${ast?._tag}`);
@@ -1244,50 +1674,124 @@ var getDefaultValue = (ast) => {
 };
 
 // src/components/Form/fields/BooleanField.tsx
-import React6, { useCallback as useCallback4 } from "react";
-import { Input as Input2 } from "@dxos/react-ui";
+import React7, { useCallback as useCallback4 } from "react";
+import { Input as Input4 } from "@dxos/react-ui";
 var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
   const handleChange = useCallback4((value3) => onValueChange?.(type, value3), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React6.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React7.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 }) => /* @__PURE__ */ React6.createElement(Input2.Switch, {
+  }, ({ value: value3 }) => /* @__PURE__ */ React7.createElement(Input4.Switch, {
     disabled: !!readonly,
     checked: value3,
     onCheckedChange: handleChange
   }));
 };
 
+// src/components/Form/fields/DateField.tsx
+import { format as formatDate3 } from "date-fns";
+import React8, { useCallback as useCallback5 } from "react";
+import { Format as Format5 } from "@dxos/echo";
+import { Input as Input5 } from "@dxos/react-ui";
+var isoToLocalDateTime = (value3) => {
+  if (!value3) {
+    return "";
+  }
+  const date = new Date(value3);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return formatDate3(date, "yyyy-MM-dd'T'HH:mm");
+};
+var localDateTimeToIso = (value3) => {
+  if (!value3) {
+    return void 0;
+  }
+  const date = new Date(value3);
+  return Number.isNaN(date.getTime()) ? void 0 : date.toISOString();
+};
+var DateField = ({ type, format, readonly, placeholder: _placeholder, onValueChange, onBlur: _onBlur, ...props }) => {
+  const handleSimpleChange = useCallback5((next) => onValueChange(type, next), [
+    type,
+    onValueChange
+  ]);
+  const handleDateTimeChange = useCallback5((next) => {
+    const iso = localDateTimeToIso(next);
+    onValueChange(type, iso);
+  }, [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React8.createElement(FormFieldWrapper, {
+    readonly,
+    format,
+    ...props
+  }, ({ value: value3 }) => {
+    switch (format) {
+      case Format5.TypeFormat.Date:
+        return /* @__PURE__ */ React8.createElement("div", {
+          className: "grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1"
+        }, /* @__PURE__ */ React8.createElement(Input5.Date, {
+          classNames: "min-w-0 overflow-hidden",
+          disabled: !!readonly,
+          value: value3 ?? "",
+          onValueChange: handleSimpleChange
+        }), /* @__PURE__ */ React8.createElement(Input5.TriggerIcon, {
+          classNames: "h-full"
+        }));
+      case Format5.TypeFormat.Time:
+        return /* @__PURE__ */ React8.createElement(Input5.Time, {
+          disabled: !!readonly,
+          value: value3 ?? "",
+          onValueChange: handleSimpleChange
+        });
+      case Format5.TypeFormat.DateTime:
+      default:
+        return /* @__PURE__ */ React8.createElement("div", {
+          className: "grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1"
+        }, /* @__PURE__ */ React8.createElement(Input5.DateTime, {
+          classNames: "min-w-0 overflow-hidden",
+          disabled: !!readonly,
+          value: isoToLocalDateTime(value3),
+          onValueChange: handleDateTimeChange
+        }), /* @__PURE__ */ React8.createElement(Input5.TriggerIcon, {
+          classNames: "h-full"
+        }));
+    }
+  });
+};
+
 // src/components/Form/fields/GeoPointField.tsx
-import React7, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
+import React9, { useCallback as useCallback6, useEffect as useEffect3, useMemo as useMemo6, useState as useState2 } from "react";
 import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
-import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Input as Input6, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
-var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation4(translationKey);
+import { translationKey as translationKey4 } from "#translations";
+var GeoPointField = ({ type, label, jsonPath, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = useTranslation4(translationKey4);
   const { status, error } = getStatus();
-  const geoPoint = useMemo5(() => getValue() ?? [
+  const geoPoint = useMemo6(() => getValue() ?? [
     0,
     0
   ], [
     getValue
   ]);
-  const value3 = useMemo5(() => GeoLocation3.fromGeoPoint(geoPoint), [
+  const value3 = useMemo6(() => GeoLocation3.fromGeoPoint(geoPoint), [
     geoPoint
   ]);
   const [longitudeText, setLongitudeText] = useState2(value3.longitude?.toString());
   const [latitudeText, setLatitudeText] = useState2(value3.latitude?.toString());
-  useEffect4(() => {
+  useEffect3(() => {
     const location = GeoLocation3.fromGeoPoint(geoPoint);
     setLongitudeText(location.longitude?.toString());
     setLatitudeText(location.latitude?.toString());
   }, [
     geoPoint
   ]);
-  const handleChange = useCallback5((coordinateType, setText) => (event) => {
+  const handleChange = useCallback6((coordinateType, setText) => (event) => {
     const inputText = event.target.value;
     setText(inputText);
     if (inputText !== "" && inputText !== "-") {
@@ -1313,33 +1817,33 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
   if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Input3.Root, {
+  return /* @__PURE__ */ React9.createElement(Input6.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React7.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React9.createElement(FormFieldLabel, {
     error,
     readonly,
     label,
+    path: jsonPath,
     asChild: true
-  }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("latitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+  }), layout === "static" ? /* @__PURE__ */ React9.createElement(LatLng, value3) : /* @__PURE__ */ React9.createElement("div", {
+    className: "grid grid-cols-2 gap-form-gap"
+  }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Input6.Root, null, layout !== "inline" && /* @__PURE__ */ React9.createElement(Input6.Label, null, t("latitude.label")), /* @__PURE__ */ React9.createElement(Input6.TextInput, {
     type: "number",
     step: "0.00001",
     min: "-90",
     max: "90",
     disabled: !!readonly,
-    placeholder: t("latitude placeholder"),
+    placeholder: t("latitude.placeholder"),
     value: latitudeText ?? "",
     onChange: handleChange("latitude", setLatitudeText),
     onBlur
-  }))), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("longitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+  }))), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(Input6.Root, null, layout !== "inline" && /* @__PURE__ */ React9.createElement(Input6.Label, null, t("longitude.label")), /* @__PURE__ */ React9.createElement(Input6.TextInput, {
     type: "number",
     step: "0.00001",
     min: "-180",
     max: "180",
     disabled: !!readonly,
-    placeholder: t("longitude placeholder"),
+    placeholder: t("longitude.placeholder"),
     value: longitudeText ?? "",
     onChange: handleChange("longitude", setLongitudeText),
     onBlur
@@ -1348,81 +1852,265 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
 var LatLng = ({ latitude = 0, longitude = 0 }) => {
   const latHem = latitude >= 0 ? "N" : "S";
   const lngHem = longitude >= 0 ? "E" : "W";
-  return /* @__PURE__ */ React7.createElement("span", {
-    className: "inline-flex items-center gap-1"
-  }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+  return /* @__PURE__ */ React9.createElement("span", {
+    className: "inline-flex items-center gap-form-gap"
+  }, /* @__PURE__ */ React9.createElement("span", null, /* @__PURE__ */ React9.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React9.createElement("span", {
     className: "text-subdued"
-  }, "\xB0", latHem)), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+  }, "\xB0", latHem)), /* @__PURE__ */ React9.createElement("span", null, /* @__PURE__ */ React9.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React9.createElement("span", {
     className: "text-subdued"
   }, "\xB0", lngHem)));
 };
 
-// src/components/Form/fields/MarkdownField.tsx
-import React8, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2 } from "react";
-import { Input as Input4 } from "@dxos/react-ui";
-var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const textareaRef = useRef2(null);
-  const adjustHeight = useCallback6(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.blockSize = "auto";
-      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
-    }
-  }, []);
-  useEffect5(() => {
-    adjustHeight();
-  }, [
-    adjustHeight
+// src/components/Form/fields/InlineRefField.tsx
+import { useAtomValue } from "@effect-atom/atom-react";
+import React10, { useCallback as useCallback7, useMemo as useMemo7 } from "react";
+import { Obj, Ref as Ref3, Type as Type2 } from "@dxos/echo";
+import { AtomRef } from "@dxos/echo-atom";
+import { useType as defaultUseType } from "@dxos/echo-react";
+import { ReferenceAnnotationId as ReferenceAnnotationId2, splitJsonPath } from "@dxos/echo/internal";
+import { findAnnotation as findAnnotation2 } from "@dxos/effect";
+import { Button, Icon as Icon2, Input as Input7, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { translationKey as translationKey5 } from "#translations";
+var InlineRefField = (props) => {
+  const { type, readonly, label, jsonPath, layout, db, getValue, onValueChange, onCreate, useType: useType2 = defaultUseType } = props;
+  const { t } = useTranslation5(translationKey5);
+  const reference = getValue();
+  const typename = useMemo7(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
+    type
   ]);
-  useEffect5(() => {
-    adjustHeight();
+  const createType = useType2(db, typename);
+  const handleCreate = useCallback7(async () => {
+    if (!createType || !onCreate) {
+      return;
+    }
+    const newObject = await onCreate(createType, {});
+    if (newObject) {
+      onValueChange(type, Ref3.make(newObject));
+    }
   }, [
-    getValue(),
-    adjustHeight
-  ]);
-  const handleChange = useCallback6((event) => onValueChange(type, event.target.value), [
+    createType,
+    onCreate,
     type,
     onValueChange
   ]);
+  if (readonly && !reference) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement(Input7.Root, null, layout !== "inline" && /* @__PURE__ */ React10.createElement(FormFieldLabel, {
+    readonly,
+    label,
+    path: jsonPath
+  }), reference ? /* @__PURE__ */ React10.createElement(InlineForm, {
+    reference,
+    db,
+    readonly,
+    useType: useType2
+  }) : !readonly && onCreate && /* @__PURE__ */ React10.createElement(Button, {
+    classNames: "w-full gap-form-gap",
+    disabled: !createType || !db,
+    onClick: () => void handleCreate()
+  }, /* @__PURE__ */ React10.createElement(Icon2, {
+    icon: "ph--plus--regular",
+    size: 4
+  }), /* @__PURE__ */ React10.createElement("span", null, label || t("ref-field.placeholder"))));
+};
+var InlineForm = ({ reference, db, readonly, useType: useType2 = defaultUseType }) => {
+  const target = useAtomValue(useMemo7(() => AtomRef.make(reference), [
+    reference
+  ]));
+  const typename = target ? Obj.getTypename(target) ?? void 0 : void 0;
+  const typeFromRegistry = useType2(db, typename);
+  const targetType = target && Obj.getType(target) || typeFromRegistry;
+  const formSchema = useMemo7(() => targetType ? omitId(Type2.getSchema(targetType)) : void 0, [
+    targetType
+  ]);
+  const defaultValues = useMemo7(() => target ? {
+    ...target
+  } : {}, [
+    target
+  ]);
+  const handleChange = useCallback7((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 = splitJsonPath(path);
+        Obj.setValue(target, parts, Obj.getValue(values, parts));
+      }
+    });
+  }, [
+    target
+  ]);
+  if (!target || !formSchema) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement(Nesting, null, /* @__PURE__ */ React10.createElement(Form.Root, {
+    schema: formSchema,
+    defaultValues,
+    db,
+    onValuesChanged: handleChange
+  }, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, {
+    readonly
+  }))));
+};
+
+// src/components/Form/fields/MarkdownField.tsx
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import React11, { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import { Obj as Obj2, Ref as Ref4 } from "@dxos/echo";
+import { AtomRef as AtomRef2 } from "@dxos/echo-atom";
+import { createDocAccessor } from "@dxos/echo-db";
+import { Button as Button2, Icon as Icon3, Input as Input8, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Editor, useBasicMarkdownExtensions } from "@dxos/react-ui-editor";
+import { Text } from "@dxos/schema";
+import { createDataExtensions } from "@dxos/ui-editor";
+import { translationKey as translationKey6 } from "#translations";
+var editorClassNames = "transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2";
+var MarkdownField = ({ type, readonly, label, jsonPath, placeholder, layout, db, getStatus, getValue, onValueChange }) => {
+  const { status, error } = getStatus();
+  const isRef = Ref4.isRefType(type);
   const value3 = getValue();
-  if ((readonly || layout === "static") && !value3) {
+  if ((readonly || layout === "static") && value3 == null) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+  const renderEditor = () => {
+    if (isRef) {
+      const reference = value3;
+      if (reference) {
+        return /* @__PURE__ */ React11.createElement(RefMarkdownEditor, {
+          reference,
+          placeholder
+        });
+      }
+      if (readonly) {
+        return null;
+      }
+      return /* @__PURE__ */ React11.createElement(CreateTextButton, {
+        db,
+        disabled: !db,
+        onCreate: (ref) => onValueChange(type, ref)
+      });
+    }
+    return /* @__PURE__ */ React11.createElement(StringMarkdownEditor, {
+      value: value3 ?? "",
+      placeholder,
+      readonly: !!readonly,
+      onChange: (next) => onValueChange(type, next)
+    });
+  };
+  const renderStatic = () => {
+    if (isRef) {
+      const reference = value3;
+      return reference ? /* @__PURE__ */ React11.createElement(RefStaticText, {
+        reference
+      }) : null;
+    }
+    return /* @__PURE__ */ React11.createElement("p", {
+      className: "whitespace-pre-wrap"
+    }, value3 ?? "");
+  };
+  return /* @__PURE__ */ React11.createElement(Input8.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React11.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), layout === "static" ? /* @__PURE__ */ React8.createElement("p", null, value3) : /* @__PURE__ */ React8.createElement(Input4.TextArea, {
-    ref: textareaRef,
-    disabled: !!readonly,
+    label,
+    path: jsonPath
+  }), layout === "static" ? renderStatic() : renderEditor(), layout === "full" && /* @__PURE__ */ React11.createElement(Input8.Validation, null, error));
+};
+var RefStaticText = ({ reference }) => {
+  const text = useAtomValue2(useMemo8(() => AtomRef2.make(reference), [
+    reference
+  ]));
+  if (!text?.content) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement("p", {
+    className: "whitespace-pre-wrap"
+  }, text.content);
+};
+var RefMarkdownEditor = ({ reference, placeholder }) => {
+  const text = useAtomValue2(useMemo8(() => AtomRef2.make(reference), [
+    reference
+  ]));
+  const dataExtensions = useMemo8(() => text ? [
+    createDataExtensions({
+      id: reference.uri,
+      text: createDocAccessor(text, [
+        "content"
+      ])
+    })
+  ] : [], [
+    text,
+    reference
+  ]);
+  const extensions = useBasicMarkdownExtensions({
     placeholder,
-    value: value3 ?? "",
-    classNames: "min-h-auto max-h-40 overflow-auto",
-    onChange: handleChange,
-    onBlur,
-    style: {
-      resize: "none"
-    },
-    spellCheck: false
-  }), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
+    extensions: dataExtensions
+  });
+  if (!text) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement(Editor.Root, null, /* @__PURE__ */ React11.createElement(Editor.View, {
+    classNames: editorClassNames,
+    extensions
+  }));
+};
+var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange }) => {
+  const extensions = useBasicMarkdownExtensions({
+    placeholder
+  });
+  const handleChange = useCallback8((next) => onChange(next), [
+    onChange
+  ]);
+  return /* @__PURE__ */ React11.createElement(Editor.Root, null, /* @__PURE__ */ React11.createElement(Editor.View, {
+    classNames: editorClassNames,
+    extensions,
+    value: value3,
+    onChange: readonly ? void 0 : handleChange
+  }));
+};
+var CreateTextButton = ({ db, disabled, onCreate }) => {
+  const { t } = useTranslation6(translationKey6);
+  const handleClick = useCallback8(() => {
+    if (!db) {
+      return;
+    }
+    const text = db.add(Obj2.make(Text.Text, {
+      content: ""
+    }));
+    onCreate(Ref4.make(text));
+  }, [
+    db,
+    onCreate
+  ]);
+  return /* @__PURE__ */ React11.createElement(Button2, {
+    onClick: handleClick,
+    disabled
+  }, /* @__PURE__ */ React11.createElement(Icon3, {
+    icon: "ph--plus--regular",
+    size: 4
+  }), /* @__PURE__ */ React11.createElement("span", null, t("create-text.label")));
 };
 
 // src/components/Form/fields/NumberField.tsx
-import React9, { useCallback as useCallback7 } from "react";
-import { Input as Input5 } from "@dxos/react-ui";
+import React12, { useCallback as useCallback9 } from "react";
+import { Input as Input9 } from "@dxos/react-ui";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
-  const handleChange = useCallback7((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
+  const handleChange = useCallback9((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React9.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React12.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React9.createElement(Input5.TextInput, {
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React12.createElement(Input9.TextInput, {
     type: "number",
     disabled: !!readonly,
     placeholder,
@@ -1433,58 +2121,43 @@ var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...prop
 };
 
 // src/components/Form/fields/RefField.tsx
+import React14, { useCallback as useCallback11, useMemo as useMemo9, useState as useState4 } from "react";
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import React11, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
-import { Entity, Filter, Obj, Ref as Ref2, Type } from "@dxos/echo";
-import { ReferenceAnnotationId } from "@dxos/echo/internal";
-import { useQuery, useSchema as useSchema$ } from "@dxos/echo-react";
-import { findAnnotation } from "@dxos/effect";
-import { DXN } from "@dxos/keys";
+import { Entity, Filter, Obj as Obj3, Ref as Ref5, Type as Type3 } from "@dxos/echo";
+import { useQuery, useType as defaultUseType2 } from "@dxos/echo-react";
+import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId as ReferenceAnnotationId3 } from "@dxos/echo/internal";
+import { findAnnotation as findAnnotation3 } from "@dxos/effect";
+import { URI } from "@dxos/keys";
 import { DxAnchor } from "@dxos/lit-ui/react";
-import { Button, Icon as Icon2, Input as Input6, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Button as Button3, Icon as Icon4, Input as Input10, useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { ParentLabelAnnotationId } from "@dxos/schema";
-import { mx as mx3 } from "@dxos/ui-theme";
+import { translationKey as translationKey8 } from "#translations";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
-import React10, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
-import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-searchlist";
-var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation5(translationKey);
-  const { query } = useSearchListInput();
-  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
-    value: "__create__",
-    label: t(createOptionLabel[0], {
-      ns: createOptionLabel[1].ns,
-      text: query
-    }),
-    icon: createOptionIcon,
-    classNames: "flex items-center gap-2",
-    closeOnSelect: false,
-    onSelect: () => {
-      onCreateItemSelect(query);
-    }
-  });
-};
-var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
-  const { t } = useTranslation5(translationKey);
+import React13, { forwardRef, useCallback as useCallback10, useState as useState3 } from "react";
+import { Popover, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Combobox } from "@dxos/react-ui-list";
+import { useSearchListResults } from "@dxos/react-ui-search";
+import { translationKey as translationKey7 } from "#translations";
+var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, onSelect, onCreate, ...props }, forwardedRef) => {
+  const { t } = useTranslation7(translationKey7);
   const [showForm, setShowForm] = useState3(false);
   const [formInitialValue, setFormInitialValue] = useState3("");
-  const { results, handleSearch } = useSearchListResults({
+  const { results, query, handleSearch } = useSearchListResults({
     items: options
   });
-  const handleFormSave = useCallback8((values) => {
-    onCreate?.(values);
+  const handleFormSave = useCallback10(async (values) => {
+    await onCreate?.(values);
     setShowForm(false);
     setFormInitialValue("");
   }, [
     onCreate
   ]);
-  const handleFormCancel = useCallback8(() => {
+  const handleFormCancel = useCallback10(() => {
     setShowForm(false);
     setFormInitialValue("");
   }, []);
-  const handleKeyDown = useCallback8((event) => {
+  const handleKeyDown = useCallback10((event) => {
     if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
       event.stopPropagation();
       event.preventDefault();
@@ -1496,39 +2169,66 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, c
   }, [
     createSchema
   ]);
-  return /* @__PURE__ */ React10.createElement(Combobox.Content, {
+  if (showForm && createSchema) {
+    return /* @__PURE__ */ React13.createElement(Combobox.Content, {
+      ...props,
+      onKeyDownCapture: handleKeyDown,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React13.createElement(Popover.Viewport, null, /* @__PURE__ */ React13.createElement(Form.Root, {
+      testId: "create-referenced-object-form",
+      schema: createSchema,
+      defaultValues: createInitialValuePath ? {
+        [createInitialValuePath]: formInitialValue
+      } : {},
+      fieldMap: createFieldMap3,
+      onSave: handleFormSave,
+      onCancel: handleFormCancel
+    }, /* @__PURE__ */ React13.createElement(Form.Viewport, null, /* @__PURE__ */ React13.createElement(Form.Content, null, /* @__PURE__ */ React13.createElement(Form.FieldSet, null), /* @__PURE__ */ React13.createElement(Form.Actions, null))))), /* @__PURE__ */ React13.createElement(Combobox.Arrow, null));
+  }
+  return /* @__PURE__ */ React13.createElement(Combobox.Content, {
     ...props,
-    ref,
-    onSearch: handleSearch,
-    onKeyDownCapture: handleKeyDown
-  }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
-    testId: "create-referenced-object-form",
-    schema: createSchema,
-    values: createInitialValuePath ? {
-      [createInitialValuePath]: formInitialValue
-    } : {},
-    onSave: handleFormSave,
-    onCancel: handleFormCancel
-  }, /* @__PURE__ */ React10.createElement(Form.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, null), /* @__PURE__ */ React10.createElement(Form.Actions, null))))) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Combobox.Input, {
-    placeholder: t("ref field combobox input placeholder"),
-    autoFocus: true
-  }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
+    onKeyDownCapture: handleKeyDown,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(Combobox.Input, {
+    placeholder: t("ref-field-combobox-input.placeholder"),
+    autoFocus: true,
+    value: query,
+    onValueChange: handleSearch
+  }), /* @__PURE__ */ React13.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React13.createElement(Combobox.Item, {
     key: option.id,
     value: option.id,
     label: option.label,
     checked: selectedIds?.includes(option.id),
     onSelect: () => onSelect(option.id),
     classNames: "flex items-center gap-2"
-  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+  })), createSchema && onCreate && /* @__PURE__ */ React13.createElement(CreateItem, {
+    query,
     createOptionLabel,
-    createOptionIcon,
-    onCreateItemSelect: (query) => {
-      setFormInitialValue(query);
+    createOptionIcon: createOptionIcon ?? "ph--plus--regular",
+    onCreateItemSelect: (currentQuery) => {
+      setFormInitialValue(currentQuery);
       setShowForm(true);
     }
-  }))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
+  })), /* @__PURE__ */ React13.createElement(Combobox.Arrow, null));
 });
-ObjectPickerContent.displayName = "ObjectPickerContent";
+var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation7(translationKey7);
+  const label = createOptionLabel ? t(createOptionLabel[0], {
+    ns: createOptionLabel[1].ns,
+    text: query
+  }) : t("create-option.label");
+  return /* @__PURE__ */ React13.createElement(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,
@@ -1542,40 +2242,42 @@ var isRefSnapshot = (val) => {
   return typeof val === "object" && typeof val?.["/"] === "string";
 };
 var defaultGetOptions = (results, { parentLabel } = {}) => results.map((result) => {
-  const id = Entity.getDXN(result).toString();
-  const parent = parentLabel ? Obj.getParent(result) : void 0;
+  const id = Entity.getURI(result);
+  const parent = parentLabel ? Obj3.getParent(result) : void 0;
   const label = parent ? Entity.getLabel(parent) : Entity.getLabel(result);
   return {
     id,
     label: label ?? id
   };
 });
-var defaultResultsHook = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj.Unknown) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
+var defaultUseResults = (db, typename) => useQuery(db, typename ? typename === ANY_OBJECT_TYPENAME ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
 var RefField = (props) => {
-  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, db, resultsHook: useResults = defaultResultsHook, schemaHook: useSchema = useSchema$, getOptions: getOptions2 = defaultGetOptions, onCreate, onValueChange } = props;
-  const { t } = useTranslation6(translationKey);
+  const { type, readonly, label, jsonPath, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, db, useType: useType2 = defaultUseType2, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, onValueChange } = props;
+  const { t } = useTranslation8(translationKey8);
   const { status, error } = getStatus();
-  const typename = useMemo6(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+  const typename = useMemo9(() => type ? findAnnotation3(type, ReferenceAnnotationId3)?.typename : void 0, [
     type
   ]);
   const results = useResults(db, typename);
-  const options = useMemo6(() => {
-    const parentLabel = type ? findAnnotation(type, ParentLabelAnnotationId) === true : false;
-    return getOptions2(results, {
+  const options = useMemo9(() => {
+    const parentLabel = type ? findAnnotation3(type, ParentLabelAnnotationId) === true : false;
+    return getOptions(results, {
       parentLabel
     });
   }, [
     results,
-    getOptions2,
+    getOptions,
     type
   ]);
-  const handleGetValue = useCallback9(() => {
+  const handleGetValue = useCallback11(() => {
     const formValue = getValue();
+    const dxnToEntityId = (dxn) => dxn.split(/[:/]/).filter(Boolean).pop() ?? dxn;
     const unknownToRefOption = (value3) => {
-      const isRef = Ref2.isRef(value3);
+      const isRef = Ref5.isRef(value3);
       if (isRef || isRefSnapshot(value3)) {
-        const dxnString = isRef ? value3.dxn.toString() : value3["/"];
-        const matchingOption = options.find((option) => option.id === dxnString);
+        const dxnString = isRef ? value3.uri : value3["/"];
+        const objectId = dxnToEntityId(dxnString);
+        const matchingOption = options.find((option) => dxnToEntityId(option.id) === objectId);
         if (matchingOption) {
           return matchingOption;
         }
@@ -1587,31 +2289,39 @@ var RefField = (props) => {
     options,
     getValue
   ]);
-  const handleUpdate = useCallback9((id) => {
-    const item2 = options.find((option) => option.id === id);
-    const ref = item2 ? Ref2.fromDXN(DXN.parse(item2.id)) : void 0;
-    onValueChange(type, ref);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
   const item = handleGetValue();
-  const selectedIds = useMemo6(() => item ? [
+  const selectedIds = useMemo9(() => item ? [
     item.id
   ] : [], [
     item
   ]);
-  const createSchema = useSchema(db, typename);
-  const handleCreate = useCallback9((values) => {
-    if (createSchema && onCreate) {
-      onCreate(createSchema, values);
+  const createSchema = useType2(db, typename);
+  const [open, setOpen] = useState4(false);
+  const handleCreate = useCallback11(async (values) => {
+    if (!createSchema || !onCreate) {
+      return;
+    }
+    const newObject = await onCreate(createSchema, values);
+    if (newObject) {
+      onValueChange(type, Ref5.make(newObject));
     }
+    setOpen(false);
   }, [
     createSchema,
-    onCreate
+    onCreate,
+    type,
+    onValueChange
+  ]);
+  const handleUpdate = useCallback11((id) => {
+    const item2 = options.find((option) => option.id === id);
+    const ref = item2 ? Ref5.fromURI(URI.make(item2.id)) : void 0;
+    onValueChange(type, ref);
+  }, [
+    options,
+    type,
+    onValueChange
   ]);
-  const handleSelect = useCallback9((id) => {
+  const handleSelect = useCallback11((id) => {
     if (item?.id === id) {
       handleUpdate(void 0);
     } else {
@@ -1624,102 +2334,123 @@ var RefField = (props) => {
   if (!typename || (readonly || layout === "static") && !item) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(Input6.Root, {
+  return /* @__PURE__ */ React14.createElement(Input10.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React11.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React14.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
-    className: mx3("text-description", "mb-2")
-  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
+    label,
+    path: jsonPath
+  }), /* @__PURE__ */ React14.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React14.createElement("p", {
+    className: "text-description mb-2"
+  }, t("empty-readonly-ref-field.label")) : /* @__PURE__ */ React14.createElement(DxAnchor, {
     key: item.id,
     dxn: item.id,
     rootclassname: "me-1"
-  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+  }, item.label) : /* @__PURE__ */ React14.createElement(ObjectPicker.Root, {
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React14.createElement(ObjectPicker.Trigger, {
     asChild: true,
     classNames: "p-0"
-  }, item ? /* @__PURE__ */ React11.createElement("div", {
-    className: "flex gap-2 w-full"
-  }, /* @__PURE__ */ React11.createElement(Input6.Root, {
+  }, item ? /* @__PURE__ */ React14.createElement("div", {
+    className: "flex gap-form-gap w-full"
+  }, /* @__PURE__ */ React14.createElement(Input10.Root, {
     key: item.id
-  }, /* @__PURE__ */ React11.createElement(Input6.TextInput, {
+  }, /* @__PURE__ */ React14.createElement(Input10.TextInput, {
     value: item.label,
     readOnly: true,
     classNames: "w-full"
-  }))) : /* @__PURE__ */ React11.createElement(Button, {
-    classNames: "w-full text-start gap-2"
-  }, /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
+  }))) : /* @__PURE__ */ React14.createElement(Button3, {
+    classNames: "w-full text-start gap-form-gap"
+  }, /* @__PURE__ */ React14.createElement("div", {
     className: "grow overflow-hidden"
-  }, /* @__PURE__ */ React11.createElement("span", {
-    className: "flex truncate text-description"
-  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React11.createElement(Icon2, {
+  }, /* @__PURE__ */ React14.createElement("span", {
+    className: "truncate text-description"
+  }, placeholder || label || t("ref-field.placeholder"))), /* @__PURE__ */ React14.createElement(Icon4, {
     size: 3,
     icon: "ph--caret-down--bold"
-  }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
+  }))), /* @__PURE__ */ React14.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React14.createElement(ObjectPicker.Content, {
     classNames: "dx-card-popover-width",
     options,
     selectedIds,
-    createSchema: createSchema && omitId(createSchema),
+    // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
+    // form's validator doesn't reject required-but-hidden fields
+    // such as backing-object refs supplied by a `FactoryAnnotation`.
+    createSchema: createSchema && omitHiddenFormFields(omitId(Type3.getSchema(createSchema))),
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap: createFieldMap3,
     onCreate: handleCreate,
     onSelect: handleSelect
-  })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
+  })))), layout === "full" && /* @__PURE__ */ React14.createElement(Input10.DescriptionAndValidation, null, error));
 };
 
 // src/components/Form/fields/SelectField.tsx
-import React12, { useCallback as useCallback10 } from "react";
-import { Input as Input7, Select } from "@dxos/react-ui";
-var SelectField = ({ type, readonly, label, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
+import React15, { useCallback as useCallback12 } from "react";
+import { Icon as Icon5, Input as Input11, Select } from "@dxos/react-ui";
+import { getStyles } from "@dxos/ui-theme";
+var SelectField = ({ type, readonly, label, jsonPath, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus();
   const value3 = getValue();
-  const handleValueChange = useCallback10((value4) => onValueChange(type, value4), [
+  const handleValueChange = useCallback12((value4) => onValueChange(type, value4), [
     type,
     onValueChange
   ]);
   if ((readonly || layout === "static") && value3 == null) {
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Input7.Root, {
+  return /* @__PURE__ */ React15.createElement(Input11.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React15.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), layout === "static" ? /* @__PURE__ */ React12.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React12.createElement(Select.Root, {
+    label,
+    path: jsonPath
+  }), layout === "static" ? /* @__PURE__ */ React15.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React15.createElement(Select.Root, {
     value: value3,
     onValueChange: handleValueChange
-  }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React15.createElement(Select.TriggerButton, {
     classNames: "w-full",
     disabled: !!readonly,
     placeholder
-  }), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
+  }), /* @__PURE__ */ React15.createElement(Select.Portal, null, /* @__PURE__ */ React15.createElement(Select.Content, null, /* @__PURE__ */ React15.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2, secondaryLabel, icon, iconHue }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React12.createElement(Select.Option, {
+    /* @__PURE__ */ React15.createElement(Select.Option, {
       key: String(value4),
       value: String(value4)
-    }, label2 ?? String(value4))
-  ))), /* @__PURE__ */ React12.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
+    }, /* @__PURE__ */ React15.createElement("span", {
+      className: "flex items-center flex-row gap-2"
+    }, icon && /* @__PURE__ */ React15.createElement(Icon5, {
+      icon,
+      classNames: getIconHueStyles(iconHue)
+    }), label2 ?? String(value4), secondaryLabel && /* @__PURE__ */ React15.createElement("span", {
+      className: "text-subdued text-xs"
+    }, secondaryLabel)))
+  ))), /* @__PURE__ */ React15.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React15.createElement(Input11.DescriptionAndValidation, null, error));
+};
+var getIconHueStyles = (iconHue) => {
+  const styles = iconHue ? getStyles(iconHue) : void 0;
+  return styles?.fg;
 };
 
 // src/components/Form/fields/SelectOptionField.tsx
-import React13, { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import React16, { useCallback as useCallback13, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import { PublicKey } from "@dxos/keys";
-import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { IconButton as IconButton3, Input as Input12, Tag, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
-var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation7(translationKey);
+import { hues, osTranslations } from "@dxos/ui-theme";
+import { translationKey as translationKey9 } from "#translations";
+var SelectOptionField = ({ type, readonly, label, jsonPath, getStatus, getValue, onValueChange }) => {
+  const { t } = useTranslation9(translationKey9);
   const { status, error } = getStatus();
-  const [selected, setSelectedId] = useState4(null);
-  const [isNewOption, setIsNewOption] = useState4(false);
-  const inputRef = useRef3(null);
+  const [selected, setSelectedId] = useState5(null);
+  const [isNewOption, setIsNewOption] = useState5(false);
+  const inputRef = useRef2(null);
   const options = getValue();
-  useEffect6(() => {
+  useEffect4(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -1738,7 +2469,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     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 = useCallback11(() => {
+  const handleAdd = useCallback13(() => {
     const newId = PublicKey.random().truncate();
     const newOption = {
       id: newId,
@@ -1756,7 +2487,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  const handleDelete = useCallback11((id) => {
+  const handleDelete = useCallback13((id) => {
     const newOptions = options?.filter((option) => option.id !== id) ?? [];
     onValueChange(type, newOptions);
     setSelectedId(null);
@@ -1765,7 +2496,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  const handleMove = useCallback11((from, to) => {
+  const handleMove = useCallback13((from, to) => {
     if (!options) {
       return;
     }
@@ -1780,10 +2511,10 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  const handleClick = useCallback11((id) => {
+  const handleClick = useCallback13((id) => {
     setSelectedId((current) => current === id ? null : id);
   }, []);
-  const handleTitleChange = useCallback11((id) => (e) => {
+  const handleTitleChange = useCallback13((id) => (e) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       title: e.target.value
@@ -1794,12 +2525,12 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  const handleKeyDown = useCallback11((ev) => {
+  const handleKeyDown = useCallback13((ev) => {
     if (ev.key === "Enter") {
       setSelectedId(null);
     }
   }, []);
-  const handleColorChange = useCallback11((id) => (hue) => {
+  const handleColorChange = useCallback13((id) => (hue) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       color: hue
@@ -1810,7 +2541,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  useEffect6(() => {
+  useEffect4(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -1819,77 +2550,73 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ React13.createElement(Input8.Root, {
+  return /* @__PURE__ */ React16.createElement(Input12.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React13.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React16.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), /* @__PURE__ */ React13.createElement("div", {
-    role: "none"
-  }, options && /* @__PURE__ */ React13.createElement(List.Root, {
+    label,
+    path: jsonPath
+  }), /* @__PURE__ */ React16.createElement("div", null, options && /* @__PURE__ */ React16.createElement(List.Root, {
     items: options,
     isItem: (_item) => true,
     onMove: readonly ? void 0 : handleMove,
     readonly: !!readonly
-  }, ({ items }) => /* @__PURE__ */ React13.createElement("div", {
+  }, ({ items }) => /* @__PURE__ */ React16.createElement("div", {
     role: "list",
     className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
+  }, items?.map((item) => /* @__PURE__ */ React16.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ React13.createElement(List.Item, {
+  }, /* @__PURE__ */ React16.createElement(List.Item, {
     role: "button",
     item,
-    classNames: [
-      subtleHover,
-      "flex flex-col cursor-pointer rounded-xs"
-    ],
+    classNames: "flex flex-col cursor-pointer rounded-xs dx-hover",
     "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React16.createElement("div", {
     className: "flex items-center"
-  }, /* @__PURE__ */ React13.createElement(List.ItemDragHandle, {
+  }, /* @__PURE__ */ React16.createElement(List.ItemDragHandle, {
     disabled: !!readonly
-  }), /* @__PURE__ */ React13.createElement(List.ItemTitle, {
+  }), /* @__PURE__ */ React16.createElement(List.ItemTitle, {
     onClick: () => handleClick(item.id),
     classNames: "flex-1"
-  }, /* @__PURE__ */ React13.createElement(Tag, {
+  }, /* @__PURE__ */ React16.createElement(Tag, {
     palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ React13.createElement(IconButton3, {
+  }, item.title || "\u200B")), /* @__PURE__ */ React16.createElement(IconButton3, {
     iconOnly: true,
     variant: "ghost",
-    label: t(selected === item.id ? "collapse label" : "expand label", {
+    label: t(selected === item.id ? "collapse.label" : "expand.label", {
       ns: osTranslations
     }),
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
     onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
-    className: "flex flex-col p-form-padding gap-1 dx-density-fine"
-  }, /* @__PURE__ */ React13.createElement(Input8.Label, {
-    classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ React13.createElement("div", {
-    className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
-  }, /* @__PURE__ */ React13.createElement(Input8.TextInput, {
+  })), selected === item.id && /* @__PURE__ */ React16.createElement("div", {
+    className: "flex flex-col p-form-padding gap-form-gap dx-density-md"
+  }, /* @__PURE__ */ React16.createElement(Input12.Label, {
+    classNames: "text-sm"
+  }, t("select-option.label")), /* @__PURE__ */ React16.createElement("div", {
+    className: "grid grid-cols-[1fr_min-content_min-content] gap-form-gap"
+  }, /* @__PURE__ */ React16.createElement(Input12.TextInput, {
     disabled: !!readonly,
-    placeholder: t("select option label placeholder"),
+    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__ */ React13.createElement(HuePicker, {
+  }), /* @__PURE__ */ React16.createElement(HuePicker, {
     disabled: !!readonly,
     value: item.color,
     onChange: handleColorChange(item.id)
-  }), /* @__PURE__ */ React13.createElement(IconButton3, {
+  }), /* @__PURE__ */ React16.createElement(IconButton3, {
     disabled: !!readonly,
     icon: "ph--trash--fill",
     iconOnly: true,
-    label: t("select option delete"),
+    label: t("select-option-delete.button"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
+  })))))), /* @__PURE__ */ React16.createElement(IconButton3, {
     variant: "ghost",
     icon: "ph--plus--regular",
-    label: t("select option add"),
+    label: t("select-option-add.button"),
     onClick: handleAdd,
     disabled: !!readonly,
     classNames: "w-full"
@@ -1897,39 +2624,39 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
 };
 
 // src/components/Form/fields/TextField.tsx
-import React14, { useCallback as useCallback12 } from "react";
-import { Input as Input9 } from "@dxos/react-ui";
-var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
-  const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
+import React17, { useCallback as useCallback14 } from "react";
+import { Input as Input13 } from "@dxos/react-ui";
+var TextField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
+  const handleChange = useCallback14((event) => onValueChange(type, event.target.value), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React14.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React17.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React14.createElement(Input9.TextInput, {
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React17.createElement(Input13.TextInput, {
     noAutoFill: true,
     disabled: !!readonly,
     placeholder,
     value: value3,
-    onChange: handleChange,
-    onBlur
+    onBlur,
+    onChange: handleChange
   }));
 };
 
 // src/components/Form/fields/TextAreaField.tsx
-import React15, { useCallback as useCallback13 } from "react";
-import { Input as Input10 } from "@dxos/react-ui";
+import React18, { useCallback as useCallback15 } from "react";
+import { Input as Input14 } from "@dxos/react-ui";
 var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
-  const handleChange = useCallback13((event) => onValueChange(type, event.target.value), [
+  const handleChange = useCallback15((event) => onValueChange(type, event.target.value), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React18.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextArea, {
-    rows: 3,
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React18.createElement(Input14.TextArea, {
+    rows: 5,
     disabled: !!readonly,
     placeholder,
     value: value3,
@@ -1939,8 +2666,8 @@ var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...pr
 };
 
 // src/components/Form/fields/TupleField.tsx
-import React16 from "react";
-import { Input as Input11 } from "@dxos/react-ui";
+import React19 from "react";
+import { Input as Input15 } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/ui-theme";
 import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
 var gridCols = [
@@ -1949,18 +2676,19 @@ var gridCols = [
   "grid-cols-3",
   "grid-cols-4"
 ];
-var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValueChange, onBlur }) => {
+var TupleField = ({ binding, type, readonly, label, jsonPath, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue() ?? {};
-  return /* @__PURE__ */ React16.createElement(Input11.Root, {
+  return /* @__PURE__ */ React19.createElement(Input15.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React16.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
     error,
     readonly,
-    label
-  }), /* @__PURE__ */ React16.createElement("div", {
-    className: mx4("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React16.createElement(Input11.TextInput, {
+    label,
+    path: jsonPath
+  }), /* @__PURE__ */ React19.createElement("div", {
+    className: mx4("grid gap-form-gap", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React19.createElement(Input15.TextInput, {
     key: prop,
     type: "number",
     disabled: !!readonly,
@@ -1975,67 +2703,77 @@ var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValue
   }))));
 };
 
+// src/components/Form/meta-tags.ts
+import * as Schema4 from "effect/Schema";
+import { Ref as Ref6, Tag as Tag2 } from "@dxos/echo";
+var META_TAGS_KEY = "_tags";
+var withMetaTags = (schema) => omitId(Schema4.Struct({
+  [META_TAGS_KEY]: Schema4.Array(Ref6.Ref(Tag2.Tag)).pipe(Schema4.annotations({
+    title: "Tags"
+  }), Schema4.optional)
+}).pipe(Schema4.extend(schema)));
+
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
-  const { t } = useTranslation8(translationKey);
-  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
-  useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
+  const { t } = useTranslation10(translationKey10);
+  const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
+  useEffect5(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
-  const [schemas, setSchemas] = useState5([]);
+  const [schemas, setSchemas] = useState6([]);
   useAsyncEffect(async () => {
     if (!registry) {
       return;
     }
-    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+    const subscription = registry.query(Filter2.type(Type4.Type)).subscribe((query) => setSchemas(query.results), {
       fire: true
     });
-    const schemas2 = await registry.query().run();
+    const schemas2 = await registry.query(Filter2.type(Type4.Type)).run();
     setSchemas(schemas2);
     return () => subscription?.();
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState5();
-  useEffect7(() => {
-    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+  const [referenceSchema, setReferenceSchema] = useState6();
+  useEffect5(() => {
+    setReferenceSchema(schemas.find((schema) => Type4.getTypename(schema) === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = useState5({
+  const [{ fieldSchema }, setFieldSchema] = useState6({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const fieldMap = useMemo7(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
+  const fieldMap = useMemo10(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ React20.createElement(SelectField, {
       ...props2,
-      options: FormatEnums.filter((value3) => value3 !== Format4.TypeFormat.None).map((value3) => ({
+      options: FormatEnums.filter((value3) => value3 !== Format6.TypeFormat.None).map((value3) => ({
         value: value3,
-        label: t(`format ${value3}`)
+        label: t(`format.${value3}.label`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React20.createElement(SelectField, {
       ...props2,
-      options: schemas.map((schema) => ({
-        value: schema.typename
+      options: schemas.map((schema) => Type4.getTypename(schema)).filter((typename) => typename != null).map((typename) => ({
+        value: typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React20.createElement(SelectField, {
       ...props2,
-      options: referenceSchema ? getFormProperties(referenceSchema.ast).sort((a, b) => a.name.toString().localeCompare(b.name.toString())).map((p) => ({
+      options: referenceSchema ? getFormProperties(Type4.getSchema(referenceSchema).ast).sort((a, b) => a.name.toString().localeCompare(b.name.toString())).map((p) => ({
         value: p.name.toString()
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ React17.createElement(SelectOptionField, props2)
+    ["options"]: (props2) => /* @__PURE__ */ React20.createElement(SelectOptionField, props2)
   }), [
     t,
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback14((props2) => props2.filter((prop) => prop.name !== "type"), []);
-  const handleValuesChanged = useCallback14((_props) => {
+  const propIsNotType = useCallback16((props2) => props2.filter((prop) => prop.name !== "type"), []);
+  const handleValuesChanged = useCallback16((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -2046,8 +2784,8 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
       };
     });
     setReferenceSchema((prev) => {
-      if (_props.referenceSchema !== prev?.typename) {
-        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+      if (_props.referenceSchema !== (prev ? Type4.getTypename(prev) : void 0)) {
+        const newSchema = schemas.find((schema) => Type4.getTypename(schema) === _props.referenceSchema);
         if (newSchema) {
           return newSchema;
         }
@@ -2072,7 +2810,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback14(({ property }) => {
+  const handleValidate = useCallback16(({ property }) => {
     if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -2085,9 +2823,9 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     projection.getFields(),
     field
   ]);
-  const handleSave = useCallback14((props2) => {
+  const handleSave = useCallback16((props2) => {
     if (view) {
-      Obj2.change(view, () => {
+      Obj4.update(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2106,7 +2844,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     view,
     onSave
   ]);
-  const handleCancel = useCallback14(() => {
+  const handleCancel = useCallback16(() => {
     onSave();
     requestAnimationFrame(() => onCancel?.());
   }, [
@@ -2115,15 +2853,10 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
-    }, {
-      F: __dxlog_file2,
-      L: 172,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 156, S: void 0 });
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(Form.Root, {
+  return /* @__PURE__ */ React20.createElement(Form.Root, {
     key: field.id,
     fieldMap,
     autoFocus: true,
@@ -2139,165 +2872,617 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     onValidate: handleValidate,
     onSave: handleSave,
     onCancel: handleCancel
-  }, /* @__PURE__ */ React17.createElement(Form.Content, null, /* @__PURE__ */ React17.createElement(Form.FieldSet, null), /* @__PURE__ */ React17.createElement(Form.Actions, null)));
+  }, /* @__PURE__ */ React20.createElement(Form.Content, null, /* @__PURE__ */ React20.createElement(Form.FieldSet, null), /* @__PURE__ */ React20.createElement(Form.Actions, null)));
 };
 
-// src/components/Settings/Settings.tsx
-import React18 from "react";
-import { Button as Button2, Input as Input12, ScrollArea as ScrollArea2, toLocalizedString, useTranslation as useTranslation9 } from "@dxos/react-ui";
+// src/components/ObjectForm/ObjectForm.tsx
+import React21, { useCallback as useCallback17, useMemo as useMemo11 } from "react";
+import { Obj as Obj5, Ref as Ref7, Tag as Tag3, Type as Type5 } from "@dxos/echo";
+import { splitJsonPath as splitJsonPath2 } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
+import { translationKey as translationKey11 } from "#translations";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectForm/ObjectForm.tsx";
+var createFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback17((nextHue) => onValueChange(type, nextHue), [
+      onValueChange,
+      type
+    ]);
+    const handleReset = useCallback17(() => onValueChange(type, void 0), [
+      onValueChange,
+      type
+    ]);
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, layout !== "inline" && /* @__PURE__ */ React21.createElement(Form.Label, {
+      label
+    }), /* @__PURE__ */ React21.createElement(HuePicker2, {
+      value: getValue(),
+      onChange: handleChange,
+      onReset: handleReset
+    }));
+  }
+};
+var ObjectForm = ({ object, type }) => {
+  const db = Obj5.getDatabase(object);
+  const meta = Obj5.getMeta(object);
+  const tags = [
+    ...meta.tags
+  ];
+  const values = useMemo11(() => ({
+    [META_TAGS_KEY]: tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const formSchema = useMemo11(() => withMetaTags(Type5.getSchema(type)), [
+    type
+  ]);
+  const handleCreate = useCallback17((type2, values2) => {
+    invariant(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 48, S: void 0, A: ["db", ""] });
+    invariant(Type5.isObject(type2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 49, S: void 0, A: ["Type.isObject(type)", ""] });
+    const newObject = db.add(Obj5.make(type2, values2));
+    if (Obj5.instanceOf(Tag3.Tag, newObject)) {
+      Obj5.update(object, (object2) => {
+        Obj5.getMeta(object2).tags = [
+          ...Obj5.getMeta(object2).tags,
+          Ref7.make(newObject)
+        ];
+      });
+    }
+  }, []);
+  const handleChange = useCallback17(({ [META_TAGS_KEY]: metaTags, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath2(path)[0] === META_TAGS_KEY);
+    if (hasTagsChange) {
+      Obj5.update(object, (object2) => {
+        Obj5.getMeta(object2).tags = Array.isArray(metaTags) ? [
+          ...metaTags
+        ] : [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== META_TAGS_KEY);
+    if (nonTagPaths.length > 0) {
+      Obj5.update(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath2(path);
+          const value3 = Obj5.getValue(values2, parts);
+          Obj5.setValue(object, parts, value3);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  return /* @__PURE__ */ React21.createElement(Form.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createTypename: Type5.getTypename(Tag3.Tag),
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add-tag.label",
+      {
+        ns: translationKey11
+      }
+    ],
+    createInitialValuePath: "label",
+    createFieldMap,
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React21.createElement(Form.Viewport, null, /* @__PURE__ */ React21.createElement(Form.Content, null, /* @__PURE__ */ React21.createElement(Form.FieldSet, null))));
+};
+
+// src/components/ObjectProperties/ObjectProperties.tsx
+import * as Function from "effect/Function";
+import * as Option7 from "effect/Option";
+import React22, { useCallback as useCallback18, useMemo as useMemo12 } from "react";
+import { Obj as Obj6, Tag as Tag4, Type as Type6 } from "@dxos/echo";
+import { useType } from "@dxos/echo-react";
+import { splitJsonPath as splitJsonPath3 } from "@dxos/echo/internal";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
+import { HuePicker as HuePicker3 } from "@dxos/react-ui-pickers";
+import { FactoryAnnotation } from "@dxos/schema";
+import { translationKey as translationKey12 } from "#translations";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectProperties/ObjectProperties.tsx";
+var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef) => {
+  const db = Obj6.getDatabase(object);
+  const meta = Obj6.getMeta(object);
+  const tags = [
+    ...meta.tags
+  ];
+  const values = useMemo12(() => ({
+    [META_TAGS_KEY]: tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const typename = Obj6.getTypename(object) ?? void 0;
+  const typeFromRegistry = useType(db, typename);
+  const type = Obj6.getType(object) ?? typeFromRegistry;
+  const formSchema = useMemo12(() => {
+    return Function.pipe(type, Option7.fromNullable, Option7.map((type2) => Type6.getSchema(type2)), Option7.map((schema) => withMetaTags(schema)), Option7.getOrUndefined);
+  }, [
+    type
+  ]);
+  const handleCreate = useCallback18((type2, values2) => {
+    invariant2(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 52, S: void 0, A: ["db", ""] });
+    invariant2(Type6.isObject(type2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 53, S: void 0, A: ["Type.isObject(type)", ""] });
+    const factory = Option7.getOrUndefined(FactoryAnnotation.get(Type6.getSchema(type2)));
+    const newObject = factory ? factory(values2) : Obj6.make(type2, values2);
+    return db.add(newObject);
+  }, [
+    db
+  ]);
+  const handleChange = useCallback18(({ [META_TAGS_KEY]: metaTags, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath3(path)[0] === META_TAGS_KEY);
+    if (hasTagsChange) {
+      Obj6.update(object, (object2) => {
+        Obj6.getMeta(object2).tags = Array.isArray(metaTags) ? [
+          ...metaTags
+        ] : [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath3(path)[0] !== META_TAGS_KEY);
+    if (nonTagPaths.length > 0) {
+      Obj6.update(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath3(path);
+          const value3 = Obj6.getValue(values2, parts);
+          Obj6.setValue(object, parts, value3);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  if (!formSchema) {
+    return null;
+  }
+  return /* @__PURE__ */ React22.createElement(Form.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createTypename: Type6.getTypename(Tag4.Tag),
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add-tag.label",
+      {
+        ns: translationKey12
+      }
+    ],
+    createInitialValuePath: "label",
+    createFieldMap: createFieldMap2,
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React22.createElement(Form.Viewport, {
+    ...composableProps2(props),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React22.createElement(Form.Content, null, /* @__PURE__ */ React22.createElement(Form.FieldSet, null), children)));
+});
+var createFieldMap2 = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback18((nextHue) => onValueChange(type, nextHue), [
+      onValueChange,
+      type
+    ]);
+    const handleReset = useCallback18(() => onValueChange(type, void 0), [
+      onValueChange,
+      type
+    ]);
+    return /* @__PURE__ */ React22.createElement(React22.Fragment, null, layout !== "inline" && /* @__PURE__ */ React22.createElement(Form.Label, {
+      label
+    }), /* @__PURE__ */ React22.createElement(HuePicker3, {
+      value: getValue(),
+      onChange: handleChange,
+      onReset: handleReset
+    }));
+  }
+};
+
+// src/components/ObjectTree/ObjectTree.tsx
+import * as SchemaAST7 from "effect/SchemaAST";
+import React23 from "react";
+import { composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
 import { mx as mx5 } from "@dxos/ui-theme";
-var SETTINGS_ROOT_NAME = "Settings.Root";
-var SETTINGS_SECTION_NAME = "Settings.Section";
-var SETTINGS_SECTION_HEADING_NAME = "Settings.SectionHeading";
-var SETTINGS_GROUP_NAME = "Settings.Group";
-var SETTINGS_GROUP_BUTTON_NAME = "Settings.GroupButton";
-var SETTINGS_CONTAINER_NAME = "Settings.Container";
-var SETTINGS_FRAME_NAME = "Settings.Frame";
-var SETTINGS_FRAME_ITEM_NAME = "Settings.FrameItem";
-var SETTINGS_ITEM_NAME = "Settings.Item";
-var SETTINGS_ITEM_INPUT_NAME = "Settings.ItemInput";
-var styles = {
-  title: "pb-trim-md text-base-surface-text text-lg",
-  description: "text-base text-description",
-  grid: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg"
-};
-var SettingsRoot = ({ children }) => {
-  return /* @__PURE__ */ React18.createElement(ScrollArea2.Root, {
-    orientation: "vertical",
-    className: "dx-article"
-  }, /* @__PURE__ */ React18.createElement(ScrollArea2.Viewport, {
-    classNames: "p-trim-md"
-  }, children));
+var ObjectTreeImpl = composable3(({ schema, value: value3, ...props }, forwardedRef) => /* @__PURE__ */ React23.createElement("div", {
+  ...composableProps3(props, {
+    role: "table",
+    classNames: "font-mono text-sm w-full"
+  }),
+  ref: forwardedRef
+}, /* @__PURE__ */ React23.createElement(Node, {
+  ast: schema.ast,
+  value: value3,
+  label: null,
+  depth: 0
+})));
+ObjectTreeImpl.displayName = "ObjectTree";
+var ObjectTree = ObjectTreeImpl;
+var unwrap = (ast) => {
+  if (SchemaAST7.isRefinement(ast)) {
+    return unwrap(ast.from);
+  }
+  if (SchemaAST7.isSuspend(ast)) {
+    return unwrap(ast.f());
+  }
+  if (SchemaAST7.isTransformation(ast)) {
+    return unwrap(ast.from);
+  }
+  return ast;
 };
-SettingsRoot.displayName = SETTINGS_ROOT_NAME;
-var SettingsSection = ({ title, description, children }) => {
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SettingsSectionHeading, {
-    title,
-    description
-  }), /* @__PURE__ */ React18.createElement("div", {
-    className: "w-full pt-trim-md space-y-trim-md"
-  }, children));
+var stripOptional = (ast) => {
+  if (!SchemaAST7.isUnion(ast)) {
+    return ast;
+  }
+  const nonUndef = ast.types.filter((t) => !SchemaAST7.isUndefinedKeyword(t));
+  return nonUndef.length === 1 ? nonUndef[0] : ast;
 };
-SettingsSection.displayName = SETTINGS_SECTION_NAME;
-var SettingsSectionHeading = ({ title, description }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("h2", {
-    className: "px-trim-md mt-trim-md mb-trim-md text-xl"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
-    className: "px-trim-md my-trim-md text-description"
-  }, toLocalizedString(description, t)));
-};
-SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
-var SettingsGroupButton = ({ classNames, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(Button2, {
-    ...props,
-    classNames: [
-      "md:col-span-2",
-      classNames
-    ]
+var Node = ({ ast, value: value3, label, depth }) => {
+  const inner = unwrap(stripOptional(ast));
+  if (SchemaAST7.isTypeLiteral(inner) && isPlainObject(value3)) {
+    const childDepth = label === null ? depth : depth + 1;
+    return /* @__PURE__ */ React23.createElement(React23.Fragment, null, label !== null && /* @__PURE__ */ React23.createElement(Row, {
+      label,
+      value: null,
+      depth,
+      kind: "group"
+    }), inner.propertySignatures.map((prop) => /* @__PURE__ */ React23.createElement(Node, {
+      key: String(prop.name),
+      ast: prop.type,
+      value: value3[String(prop.name)],
+      label: String(prop.name),
+      depth: childDepth
+    })));
+  }
+  if (SchemaAST7.isTupleType(inner) && Array.isArray(value3)) {
+    const elemType = inner.rest[0]?.type;
+    return /* @__PURE__ */ React23.createElement(React23.Fragment, null, label !== null && /* @__PURE__ */ React23.createElement(Row, {
+      label,
+      value: `Array(${value3.length})`,
+      depth,
+      kind: "group"
+    }), value3.map((item, index) => /* @__PURE__ */ React23.createElement(Node, {
+      key: index,
+      ast: elemType ?? SchemaAST7.unknownKeyword,
+      value: item,
+      label: `[${index}]`,
+      depth: depth + 1
+    })));
+  }
+  return /* @__PURE__ */ React23.createElement(Row, {
+    label: label ?? "",
+    value: formatLeaf(value3),
+    depth,
+    kind: "leaf"
   });
 };
-SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
-var SettingsGroup = ({ children, classNames }) => /* @__PURE__ */ React18.createElement("div", {
-  role: "none",
-  className: mx5("group space-y-trim-md", classNames)
-}, children);
-SettingsGroup.displayName = SETTINGS_GROUP_NAME;
-var SettingsFrame = ({ children }) => /* @__PURE__ */ React18.createElement("div", {
-  role: "none",
-  className: "p-trim-md border border-separator rounded-md"
-}, children);
-SettingsFrame.displayName = SETTINGS_FRAME_NAME;
-var SettingsFrameItem = ({ title, description, children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement("div", {
-    role: "group",
-    className: "min-w-0"
-  }, /* @__PURE__ */ React18.createElement("h3", {
-    className: "text-lg mb-2"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
-    className: "my-trim-sm md:mb-0 text-description"
-  }, toLocalizedString(description, t)), children);
-};
-SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
-var SettingsContainer = ({ classNames, children }) => {
-  return /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
-    className: mx5([
-      "dx-article",
-      "*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md",
-      "border border-separator rounded-md",
-      classNames
-    ])
+var Row = ({ label, value: value3, depth }) => /* @__PURE__ */ React23.createElement("div", {
+  role: "row",
+  className: mx5("flex items-baseline gap-3 py-1"),
+  style: {
+    paddingInlineStart: 8 + depth * 16
+  }
+}, /* @__PURE__ */ React23.createElement("div", {
+  role: "cell",
+  className: "text-subdued"
+}, label), /* @__PURE__ */ React23.createElement("div", {
+  role: "cell",
+  className: mx5("break-all text-base-fg")
+}, value3));
+var isPlainObject = (value3) => typeof value3 === "object" && value3 !== null && !Array.isArray(value3);
+var formatLeaf = (value3) => {
+  if (value3 === void 0) {
+    return null;
+  }
+  if (value3 === null) {
+    return /* @__PURE__ */ React23.createElement("span", {
+      className: "text-description"
+    }, "null");
+  }
+  switch (typeof value3) {
+    case "string":
+      return /* @__PURE__ */ React23.createElement("span", {
+        className: "text-blue-text"
+      }, JSON.stringify(value3));
+    case "number":
+    case "bigint":
+      return /* @__PURE__ */ React23.createElement("span", {
+        className: "text-green-text"
+      }, String(value3));
+    case "boolean":
+      return /* @__PURE__ */ React23.createElement("span", {
+        className: "text-purple-text"
+      }, String(value3));
+    default:
+      try {
+        return JSON.stringify(value3);
+      } catch {
+        return String(value3);
+      }
+  }
+};
+
+// src/components/Settings/Settings.tsx
+import React26 from "react";
+import { ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation12 } from "@dxos/react-ui";
+import { composable as composable4, composableProps as composableProps4 } from "@dxos/react-ui";
+import { mx as mx7 } from "@dxos/ui-theme";
+import { translationKey as translationKey14 } from "#translations";
+
+// src/components/Settings/SettingsFieldSet.tsx
+import * as SchemaAST8 from "effect/SchemaAST";
+import * as String4 from "effect/String";
+import React25, { useCallback as useCallback19, useMemo as useMemo13 } from "react";
+import { getAnnotation as getAnnotation4 } from "@dxos/effect";
+import { Input as Input17, Select as Select2 } from "@dxos/react-ui";
+
+// src/components/Settings/SettingsItem.tsx
+import React24 from "react";
+import { Input as Input16, toLocalizedString, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/ui-theme";
+import { translationKey as translationKey13 } from "#translations";
+var SETTINGS_PANEL_NAME = "Settings.Panel";
+var SETTINGS_ITEM_NAME = "Settings.Item";
+var SettingsPanel = ({ classNames, children }) => {
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx6("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
   }, children);
 };
-SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+SettingsPanel.displayName = SETTINGS_PANEL_NAME;
 var SettingsItem = ({ title, description = "", children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(SettingsContainer, {
-    classNames: styles.grid
-  }, /* @__PURE__ */ React18.createElement("h3", {
-    className: mx5(styles.title, "md:col-span-2")
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement("p", {
-    className: styles.description
-  }, toLocalizedString(description, t)), /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
-    className: "overflow-hidden text-end py-1"
-  }, children));
+  const { t } = useTranslation11(translationKey13);
+  return /* @__PURE__ */ React24.createElement(Input16.Root, null, /* @__PURE__ */ React24.createElement(SettingsPanel, {
+    classNames: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0"
+  }, /* @__PURE__ */ React24.createElement(Input16.Label, {
+    classNames: "pb-trim-md text-base-fg text-lg md:col-span-2"
+  }, toLocalizedString(title, t)), /* @__PURE__ */ React24.createElement(Input16.DescriptionAndValidation, null, /* @__PURE__ */ React24.createElement(Input16.Description, {
+    classNames: "text-base text-description"
+  }, toLocalizedString(description, t))), /* @__PURE__ */ React24.createElement("div", {
+    className: "text-end py-1"
+  }, children)));
 };
 SettingsItem.displayName = SETTINGS_ITEM_NAME;
-var SettingsItemInput = ({ title, description = "", children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(Input12.Root, null, /* @__PURE__ */ React18.createElement(SettingsContainer, {
-    classNames: styles.grid
-  }, /* @__PURE__ */ React18.createElement(Input12.Label, {
-    classNames: mx5(styles.title, "md:col-span-2")
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React18.createElement(Input12.Description, {
-    classNames: styles.description
-  }, toLocalizedString(description, t))), /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
-    className: "text-end py-1"
+
+// src/components/Settings/SettingsFieldSet.tsx
+var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, visible, sort, pathPrefix = "" }) => {
+  const properties = useMemo13(() => {
+    const props = getFormProperties(schema.ast);
+    if (!sort) {
+      return props;
+    }
+    const rank = (name) => {
+      const idx = sort.indexOf(name);
+      return idx === -1 ? Number.POSITIVE_INFINITY : idx;
+    };
+    return [
+      ...props
+    ].sort(({ name: a }, { name: b }) => rank(a.toString()) - rank(b.toString()));
+  }, [
+    schema,
+    sort
+  ]);
+  const handleChange = useCallback19((name, value3) => {
+    onValuesChanged?.({
+      ...values,
+      [name]: value3
+    });
+  }, [
+    values,
+    onValuesChanged
+  ]);
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, properties.map((property) => {
+    const name = property.name.toString();
+    const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+    if (visible && !visible(path, values)) {
+      return null;
+    }
+    const entry = fieldMap?.[name];
+    return /* @__PURE__ */ React25.createElement(SettingsFieldItem, {
+      key: name,
+      path,
+      property,
+      value: values[name],
+      onChange: (value3) => handleChange(name, value3),
+      readonly,
+      customField: typeof entry === "function" ? entry : void 0,
+      nestedFieldMap: typeof entry === "object" ? entry : void 0,
+      visible,
+      sort
+    });
+  }));
+};
+SettingsFieldSet.displayName = "Settings.FieldSet";
+var SettingsFieldItem = ({ property, path, value: value3, onChange, readonly, customField, nestedFieldMap, visible, sort }) => {
+  const { type } = property;
+  const name = property.name.toString();
+  const title = getAnnotation4(SchemaAST8.TitleAnnotationId)(type) ?? String4.capitalize(name);
+  const description = getAnnotation4(SchemaAST8.DescriptionAnnotationId)(type);
+  if (customField) {
+    const CustomField = customField;
+    return /* @__PURE__ */ React25.createElement(SettingsItem, {
+      title,
+      description
+    }, /* @__PURE__ */ React25.createElement(CustomField, {
+      value: value3,
+      onChange,
+      readonly
+    }));
+  }
+  const fieldType = detectFieldType(type);
+  switch (fieldType) {
+    case "struct":
+      return /* @__PURE__ */ React25.createElement(SettingsFieldSet, {
+        schema: {
+          ast: type
+        },
+        values: value3 ?? {},
+        onValuesChanged: onChange,
+        readonly,
+        fieldMap: nestedFieldMap,
+        visible,
+        sort,
+        pathPrefix: path
+      });
+    case "boolean":
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React25.createElement(Input17.Switch, {
+        disabled: readonly,
+        checked: !!value3,
+        onCheckedChange: (checked) => onChange(!!checked)
+      }));
+    case "select": {
+      const options = getSelectOptionsFromAst(type) ?? [];
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React25.createElement(Select2.Root, {
+        disabled: readonly,
+        value: value3 == null ? "" : globalThis.String(value3),
+        onValueChange: (selected) => {
+          const matched = options.find((option) => globalThis.String(option.value) === selected);
+          onChange(matched?.value ?? selected);
+        }
+      }, /* @__PURE__ */ React25.createElement(Select2.TriggerButton, {
+        disabled: readonly
+      }), /* @__PURE__ */ React25.createElement(Select2.Portal, null, /* @__PURE__ */ React25.createElement(Select2.Content, null, /* @__PURE__ */ React25.createElement(Select2.Viewport, null, options.map((option) => /* @__PURE__ */ React25.createElement(Select2.Option, {
+        key: globalThis.String(option.value),
+        value: globalThis.String(option.value)
+      }, option.label ?? globalThis.String(option.value)))), /* @__PURE__ */ React25.createElement(Select2.Arrow, null)))));
+    }
+    case "string":
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React25.createElement(Input17.TextInput, {
+        disabled: readonly,
+        value: value3 ?? "",
+        onChange: (event) => onChange(event.target.value)
+      }));
+    case "number":
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React25.createElement(Input17.TextInput, {
+        disabled: readonly,
+        type: "number",
+        value: value3 ?? "",
+        onChange: (event) => {
+          if (event.target.value === "") {
+            onChange(void 0);
+            return;
+          }
+          const parsed = Number(event.target.value);
+          onChange(Number.isNaN(parsed) ? void 0 : parsed);
+        }
+      }));
+    default:
+      return null;
+  }
+};
+
+// src/components/Settings/Settings.tsx
+var SETTINGS_ROOT_NAME = "Settings.Root";
+var SETTINGS_VIEWPORT_NAME = "Settings.Viewport";
+var SETTINGS_SECTION_NAME = "Settings.Section";
+var SettingsRoot = ({ children, classNames }) => {
+  return /* @__PURE__ */ React26.createElement("div", {
+    className: mx7("flex flex-col gap-2", classNames)
+  }, children);
+};
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+var SettingsViewport = composable4(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React26.createElement(ScrollArea2.Root, {
+    ...composableProps4(props),
+    orientation: "vertical",
+    centered: true,
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React26.createElement(ScrollArea2.Viewport, {
+    classNames: "px-4 pointer-coarse:px-2"
+  }, /* @__PURE__ */ React26.createElement("div", {
+    className: "dx-document flex flex-col gap-2 py-4"
   }, children)));
+});
+SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
+var SettingsSection = ({ title, description, children }) => {
+  const { t } = useTranslation12(translationKey14);
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("h2", {
+    className: "px-trim-md mt-trim-md text-xl"
+  }, toLocalizedString2(title, t)), description && /* @__PURE__ */ React26.createElement("p", {
+    className: "px-trim-md text-description"
+  }, toLocalizedString2(description, t)), /* @__PURE__ */ React26.createElement("div", {
+    className: "w-full pt-trim-md space-y-trim-md"
+  }, children));
 };
-SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
 var Settings = {
   Root: SettingsRoot,
+  Viewport: SettingsViewport,
   Section: SettingsSection,
-  SectionHeading: SettingsSectionHeading,
-  Group: SettingsGroup,
-  GroupButton: SettingsGroupButton,
-  Container: SettingsContainer,
-  Frame: SettingsFrame,
-  FrameItem: SettingsFrameItem,
+  Panel: SettingsPanel,
   Item: SettingsItem,
-  ItemInput: SettingsItemInput
+  FieldSet: SettingsFieldSet
+};
+
+// src/components/Settings/SettingsSelectField.tsx
+import React27 from "react";
+import { Select as Select3 } from "@dxos/react-ui";
+var createSelectField = ({ options, defaultLabel = "Default" }) => {
+  const normalized = options.map((option) => typeof option === "string" ? {
+    value: option,
+    label: option
+  } : option);
+  const hasDefault = defaultLabel !== null;
+  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : "";
+  return ({ value: value3, onChange, readonly }) => /* @__PURE__ */ React27.createElement(Select3.Root, {
+    disabled: readonly,
+    value: value3 ?? sentinel,
+    onValueChange: (next) => onChange(hasDefault && next === sentinel ? void 0 : next)
+  }, /* @__PURE__ */ React27.createElement(Select3.TriggerButton, {
+    disabled: readonly
+  }), /* @__PURE__ */ React27.createElement(Select3.Portal, null, /* @__PURE__ */ React27.createElement(Select3.Content, null, /* @__PURE__ */ React27.createElement(Select3.Viewport, null, hasDefault && /* @__PURE__ */ React27.createElement(Select3.Option, {
+    value: sentinel
+  }, defaultLabel), normalized.map((option) => /* @__PURE__ */ React27.createElement(Select3.Option, {
+    key: option.value,
+    value: option.value
+  }, option.label ?? option.value))), /* @__PURE__ */ React27.createElement(Select3.Arrow, null))));
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
-import * as Array2 from "effect/Array";
 import * as Match2 from "effect/Match";
-import * as Option4 from "effect/Option";
-import * as Schema3 from "effect/Schema";
-import React19, { forwardRef as forwardRef3, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
-import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj3, Query, QueryAST, Ref as Ref3 } from "@dxos/echo";
-import { View } from "@dxos/echo";
-import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
-import { invariant } from "@dxos/invariant";
+import * as Option8 from "effect/Option";
+import * as Schema5 from "effect/Schema";
+import React28, { forwardRef as forwardRef2, useCallback as useCallback20, useContext as useContext2, useImperativeHandle, useMemo as useMemo14, useState as useState7 } from "react";
+import { Entity as Entity2, Feed, Filter as Filter3, Format as Format7, Obj as Obj7, Query, QueryAST, Ref as Ref8, Type as Type7, View } from "@dxos/echo";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
-import { IconButton as IconButton4, Input as Input13, Message, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { IconButton as IconButton4, Input as Input18, Message, useTranslation as useTranslation13 } from "@dxos/react-ui";
 import { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
 import { ParentLabelAnnotation, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
-import { mx as mx6, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
-  const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation10(translationKey);
-  const projectionModel = useMemo8(() => {
-    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+import { mx as mx8, osTranslations as osTranslations2 } from "@dxos/ui-theme";
+import { translationKey as translationKey15 } from "#translations";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, type, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
+  const atomRegistry = useContext2(RegistryContext);
+  const schemaReadonly = Type7.getDatabase(type) == null;
+  const { t } = useTranslation13(translationKey15);
+  const projectionModel = useMemo14(() => {
+    const jsonSchema = type.jsonSchema;
+    const change = createEchoChangeCallback(view, Type7.getDatabase(type) != null ? type : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2307,7 +3492,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     return model;
   }, [
     atomRegistry,
-    schema,
+    type,
     view
   ]);
   useImperativeHandle(forwardedRef, () => projectionModel, [
@@ -2319,41 +3504,42 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     if (from._tag !== "scope") {
       return void 0;
     }
-    return Option4.fromNullable(from.scope.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.map(String), Option4.getOrUndefined);
+    const feedScope = from.scopes.find((s) => s._tag === "feed");
+    return Option8.fromNullable(feedScope).pipe(Option8.map((s) => s.feedUri), Option8.getOrUndefined);
   }), Match2.orElse(() => void 0));
-  const feeds = useQuery2(db, Filter2.type(Feed.Feed));
-  const targetRef = useMemo8(() => {
+  const feeds = useQuery2(db, Filter3.type(Feed.Feed));
+  const targetRef = useMemo14(() => {
     if (!queueTarget) {
       return void 0;
     }
-    const feed = feeds.find((feed2) => Feed.getQueueDxn(feed2)?.toString() === queueTarget);
-    return feed ? Ref3.fromDXN(Entity2.getDXN(feed)) : void 0;
+    const feed = feeds.find((feed2) => Feed.getQueueUri(feed2)?.toString() === queueTarget);
+    return feed ? Ref8.fromURI(Entity2.getURI(feed)) : void 0;
   }, [
     queueTarget,
     feeds
   ]);
-  const viewSchema = useMemo8(() => {
-    const base = Schema3.Struct({
-      query: mode === "schema" ? Format5.URL.annotations({
+  const viewSchema = useMemo14(() => {
+    const base = Schema5.Struct({
+      query: mode === "schema" ? Format7.URL.annotations({
         title: "Record type"
       }) : QueryAST.Query.annotations({
         title: "Query"
       })
     });
     if (mode === "tag") {
-      return Schema3.Struct({
+      return Schema5.Struct({
         ...base.fields,
         // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
-        target: Ref3.Ref(Feed.Feed).pipe(Schema3.annotations({
+        target: Ref8.Ref(Feed.Feed).pipe(Schema5.annotations({
           title: "Target Feed"
-        }), ParentLabelAnnotation.set(true), Schema3.optional)
-      }).pipe(Schema3.mutable);
+        }), ParentLabelAnnotation.set(true), Schema5.optional)
+      }).pipe(Schema5.mutable);
     }
-    return base.pipe(Schema3.mutable);
+    return base.pipe(Schema5.mutable);
   }, [
     mode
   ]);
-  const viewValues = useMemo8(() => ({
+  const viewValues = useMemo14(() => ({
     query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
     target: targetRef
   }), [
@@ -2361,7 +3547,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     view.query.ast,
     targetRef
   ]);
-  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+  const fieldMap = useMemo14(() => mode === "tag" ? customFields({
     types,
     tags
   }) : void 0, [
@@ -2369,55 +3555,46 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleUpdate = useCallback15((values) => {
+  const handleUpdate = useCallback20((values) => {
     const targetValue = values.target;
     let queueDxn;
-    if (Ref3.isRef(targetValue)) {
-      const feedDxn = targetValue.dxn.toString();
-      const feed = feeds.find((feed2) => Obj3.getDXN(feed2).toString() === feedDxn);
+    if (Ref8.isRef(targetValue)) {
+      const feedUri = targetValue.uri;
+      const feed = feeds.find((feed2) => Obj7.getURI(feed2) === feedUri);
       if (feed) {
-        queueDxn = Feed.getQueueDxn(feed)?.toString();
+        queueDxn = Feed.getQueueUri(feed);
       }
     }
-    const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : JSON.parse(JSON.stringify(values.query));
+    const query = mode === "schema" ? Query.select(Filter3.typename(values.query)).ast : JSON.parse(JSON.stringify(values.query));
     onQueryChanged?.(query, queueDxn);
   }, [
     onQueryChanged,
     mode,
     feeds
   ]);
-  const handleDelete = useCallback15((fieldId) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 185,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback20((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 124, S: void 0, A: ["!readonly", ""] });
     onDelete?.(fieldId);
   }, [
     onDelete,
     readonly
   ]);
-  return /* @__PURE__ */ React19.createElement("div", {
-    role: "none",
-    className: mx6(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Message.Root, {
+  return /* @__PURE__ */ React28.createElement("div", {
+    className: mx8(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React28.createElement(Message.Root, {
     valence: "info",
     classNames: "my-form-padding"
-  }, /* @__PURE__ */ React19.createElement(Message.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+  }, /* @__PURE__ */ React28.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React28.createElement(Form.Root, {
     schema: viewSchema,
     values: viewValues,
     fieldMap,
     db,
     onValuesChanged: handleUpdate
-  }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
-    label: t("fields label"),
+  }, /* @__PURE__ */ React28.createElement(Form.FieldSet, null), /* @__PURE__ */ React28.createElement(FormFieldLabel, {
+    label: t("fields.label"),
     asChild: true
-  }), /* @__PURE__ */ React19.createElement(FieldList, {
-    schema,
+  }), /* @__PURE__ */ React28.createElement(FieldList, {
+    type,
     view,
     registry,
     readonly,
@@ -2425,14 +3602,14 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     onDelete: handleDelete
   })));
 });
-var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
-  const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation10(translationKey);
+var FieldList = ({ type, view, registry, readonly, showHeading = false, onDelete }) => {
+  const atomRegistry = useContext2(RegistryContext);
+  const schemaReadonly = Type7.getDatabase(type) == null;
+  const { t } = useTranslation13(translationKey15);
   const [viewSnapshot] = useObject(view);
-  const projectionModel = useMemo8(() => {
-    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+  const projectionModel = useMemo14(() => {
+    const jsonSchema = type.jsonSchema;
+    const change = createEchoChangeCallback(view, Type7.getDatabase(type) != null ? type : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2442,41 +3619,25 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     return model;
   }, [
     atomRegistry,
-    schema,
+    type,
     view
   ]);
-  const [expandedField, setExpandedField] = useState6();
-  const handleAdd = useCallback15(() => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 250,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const [expandedField, setExpandedField] = useState7();
+  const handleAdd = useCallback20(() => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 178, S: void 0, A: ["!readonly", ""] });
     const field = projectionModel.createFieldProjection();
     setExpandedField(field.id);
   }, [
     projectionModel,
     readonly
   ]);
-  const handleToggleField = useCallback15((field) => {
+  const handleToggleField = useCallback20((field) => {
     setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
   }, [
     readonly
   ]);
-  const handleDelete = useCallback15((fieldId) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 264,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback20((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 191, S: void 0, A: ["!readonly", ""] });
     if (fieldId === expandedField) {
       setExpandedField(void 0);
     }
@@ -2486,36 +3647,28 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     onDelete,
     readonly
   ]);
-  const handleMove = useCallback15((fromIndex, toIndex) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 276,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
-    Obj3.change(view, (v) => {
+  const handleMove = useCallback20((fromIndex, toIndex) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 202, S: void 0, A: ["!readonly", ""] });
+    Obj7.update(view, (view2) => {
       const fields = [
-        ...v.projection.fields
+        ...view2.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      v.projection.fields = fields;
+      view2.projection.fields = fields;
     });
   }, [
     view,
     readonly
   ]);
-  const handleClose = useCallback15(() => setExpandedField(void 0), []);
-  const handleHide = useCallback15((fieldId) => {
+  const handleClose = useCallback20(() => setExpandedField(void 0), []);
+  const handleHide = useCallback20((fieldId) => {
     setExpandedField(void 0);
     projectionModel.hideFieldProjection(fieldId);
   }, [
     projectionModel
   ]);
-  const handleShow = useCallback15((property) => {
+  const handleShow = useCallback20((property) => {
     setExpandedField(void 0);
     projectionModel.showFieldProjection(property);
   }, [
@@ -2524,70 +3677,67 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   if (!viewSnapshot) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(List2.Root, {
+  return /* @__PURE__ */ React28.createElement(List2.Root, {
     items: viewSnapshot.projection.fields,
-    isItem: Schema3.is(View.FieldSchema),
+    isItem: Schema5.is(View.FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
     readonly
-  }, ({ items: fields }) => /* @__PURE__ */ React19.createElement(React19.Fragment, null, showHeading && /* @__PURE__ */ React19.createElement("h3", {
+  }, ({ items: fields }) => /* @__PURE__ */ React28.createElement(React28.Fragment, null, showHeading && /* @__PURE__ */ React28.createElement("h3", {
     className: "text-sm"
-  }, t("field path label")), /* @__PURE__ */ React19.createElement("div", {
+  }, t("field-path.label")), /* @__PURE__ */ React28.createElement("div", {
     role: "list",
     className: "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]"
   }, fields?.map((field) => {
     const hidden = field.visible === false;
-    return /* @__PURE__ */ React19.createElement(List2.Item, {
+    return /* @__PURE__ */ React28.createElement(List2.Item, {
       key: field.id,
       item: field,
       classNames: "grid grid-cols-subgrid col-span-5",
       "aria-expanded": expandedField === field.id
-    }, /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
-      className: mx6(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
-    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+    }, /* @__PURE__ */ React28.createElement("div", {
+      className: "grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover"
+    }, /* @__PURE__ */ React28.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
-    }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
+    }), /* @__PURE__ */ React28.createElement(List2.ItemTitle, {
       classNames: hidden && "text-subdued",
       onClick: () => handleToggleField(field)
-    }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemIconButton, {
-      label: t(hidden ? "show field label" : "hide field label"),
+    }, field.path), /* @__PURE__ */ React28.createElement(List2.ItemIconButton, {
+      label: t(hidden ? "show-field.label" : "hide-field.label"),
       "data-testid": hidden ? "show-field-button" : "hide-field-button",
       icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
       autoHide: false,
       disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
       onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-    }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
-      label: t("delete field label"),
+    }), !readonly && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(List2.ItemDeleteButton, {
+      label: t("delete-field.label"),
       autoHide: false,
       disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
       onClick: () => handleDelete(field.id),
       "data-testid": "field.delete"
-    }), /* @__PURE__ */ React19.createElement(List2.ItemIconButton, {
+    }), /* @__PURE__ */ React28.createElement(List2.ItemIconButton, {
       iconOnly: true,
       variant: "ghost",
-      label: t("toggle expand label", {
+      label: t("toggle-expand.label", {
         ns: osTranslations2
       }),
       icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleToggleField(field),
       "data-testid": "field.toggle"
-    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
-      className: "col-span-5 mt-1 mb-1 border border-separator rounded-md"
-    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React28.createElement("div", {
+      className: "col-span-full mt-1 mb-1 border border-separator rounded-md"
+    }, /* @__PURE__ */ React28.createElement(FieldEditor, {
       readonly: readonly || schemaReadonly,
       registry,
       projection: projectionModel,
       field,
       onSave: handleClose
     })));
-  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
-    role: "none",
+  })), !readonly && !expandedField && /* @__PURE__ */ React28.createElement("div", {
     className: "my-form-padding"
-  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+  }, /* @__PURE__ */ React28.createElement(IconButton4, {
     icon: "ph--plus--regular",
-    label: t("add property button label"),
+    label: t("add-property-button.label"),
     onClick: handleAdd,
     disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
     classNames: "w-full"
@@ -2595,13 +3745,13 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
 };
 var customFields = ({ types, tags }) => ({
   query: ({ type, readonly, label, getValue, onValueChange }) => {
-    const handleChange = useCallback15((query) => onValueChange(type, query.ast), [
+    const handleChange = useCallback20((query) => onValueChange(type, query.ast), [
       onValueChange
     ]);
-    return /* @__PURE__ */ React19.createElement(Input13.Root, null, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+    return /* @__PURE__ */ React28.createElement(Input18.Root, null, /* @__PURE__ */ React28.createElement(FormFieldLabel, {
       readonly,
       label
-    }), /* @__PURE__ */ React19.createElement(QueryForm, {
+    }), /* @__PURE__ */ React28.createElement(QueryForm, {
       initialQuery: getValue(),
       types,
       tags,
@@ -2612,15 +3762,27 @@ var customFields = ({ types, tags }) => ({
 export {
   ArrayField,
   BooleanField,
+  DEFAULT_LAYOUT_NAME,
+  DateField,
   FieldEditor,
   Form,
   FormFieldErrorBoundary,
   FormFieldLabel,
   FormFieldWrapper,
+  FormLayout,
+  FormLayoutAnnotation,
+  FormLayoutAnnotationId,
+  FormTooltipsContext,
   GeoPointField,
+  InlineRefField,
+  LayoutParseError,
+  META_TAGS_KEY,
   MarkdownField,
   NumberField,
+  ObjectForm,
   ObjectPicker,
+  ObjectProperties,
+  ObjectTree,
   RefField,
   SelectField,
   SelectOptionField,
@@ -2630,19 +3792,25 @@ export {
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
+  createSelectField,
+  detectFieldType,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
   getFormProperties,
   getRefProps,
+  getSelectOptionsFromAst,
+  omitHiddenFormFields,
   omitId,
+  parseLayout,
   parseValue,
   pathNotUniqueError,
-  translations,
   useFormContext,
   useFormFieldState,
   useFormHandler,
+  useFormTooltips,
   useFormValues,
-  useKeyHandler
+  useKeyHandler,
+  withMetaTags
 };
 //# sourceMappingURL=index.mjs.map