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

package/dist/lib/browser/index.mjs

@@ -1,11 +1,11 @@
 // src/components/FieldEditor/FieldEditor.tsx
-import React17, { useCallback as useCallback14, useEffect as useEffect5, useMemo as useMemo8, useState as useState6 } from "react";
-import { Obj as Obj3 } 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 useTranslation9 } from "@dxos/react-ui";
+import { useAsyncEffect, useTranslation as useTranslation10 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
-import { translationKey as translationKey9 } from "#translations";
+import { translationKey as translationKey10 } from "#translations";
 
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
@@ -310,18 +310,39 @@ var formatForEditing = ({ type, format, value: value3, locale = void 0 }) => {
 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) => {
-  const hidden = new Set(SchemaAST2.getPropertySignatures(ast).filter((prop) => Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)) === false).map((prop) => prop.name));
-  return getProperties(ast).filter((prop) => !hidden.has(prop.name));
+  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 { ReferenceAnnotationId } from "@dxos/echo/internal";
-import { findAnnotation, getArrayElementType, isArrayType } from "@dxos/effect";
+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)) {
@@ -346,23 +367,25 @@ var getRefProps = (ast) => {
 };
 
 // src/components/Form/fields/ArrayField.tsx
-import * as Option4 from "effect/Option";
-import * as SchemaAST5 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 Option3 from "effect/Option";
-import * as Schema2 from "effect/Schema";
-import * as SchemaAST4 from "effect/SchemaAST";
-import React4, { useEffect as useEffect2, useMemo as useMemo4, useRef } from "react";
-import { Annotation as EchoAnnotation } from "@dxos/echo";
-import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
-import { IconButton, ScrollArea, useMergeRefs, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { composable, composableProps, mx, withColumn } 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
@@ -582,18 +605,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) => {
@@ -638,16 +661,32 @@ var useKeyHandler = (elRef, form) => {
 };
 
 // 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", {
     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"
@@ -658,14 +697,33 @@ 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", {
     className: "contents"
   }, /* @__PURE__ */ React.createElement(Input.Root, {
@@ -673,10 +731,14 @@ var FormFieldWrapper = (props) => {
   }, 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) {
@@ -695,9 +757,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-base-foreground 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;
@@ -710,7 +772,9 @@ var FormFieldErrorBoundary = class extends Component {
 };
 
 // src/components/Form/FormFieldSet.tsx
-import React3, { useMemo as useMemo3 } from "react";
+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";
@@ -719,9 +783,10 @@ import * as Schema from "effect/Schema";
 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 as getAnnotation2, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion as isLiteralUnion2, 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 {
@@ -740,7 +805,7 @@ var FormField = (props) => {
     createInitialValuePath,
     createFieldMap: createFieldMap3,
     db,
-    useSchema: schemaHook,
+    useType: schemaHook,
     getOptions,
     onCreate
   } = props;
@@ -748,7 +813,7 @@ var FormField = (props) => {
   const title = getAnnotation2(SchemaAST3.TitleAnnotationId)(type);
   const description = getAnnotation2(SchemaAST3.DescriptionAnnotationId)(type);
   const examples = getAnnotation2(SchemaAST3.ExamplesAnnotationId)(type);
-  const label = useMemo2(() => title ?? String2.capitalize(name), [
+  const label = useMemo2(() => title ?? (name == null ? "" : String2.capitalize(name)), [
     title,
     name
   ]);
@@ -758,30 +823,34 @@ var FormField = (props) => {
     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,
@@ -810,6 +879,16 @@ 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,
@@ -819,17 +898,17 @@ var FormField = (props) => {
       createInitialValuePath: isCreateTarget ? createInitialValuePath : void 0,
       createFieldMap: isCreateTarget ? createFieldMap3 : void 0,
       db,
-      useSchema: schemaHook,
+      useType: schemaHook,
       getOptions,
       onCreate
     });
   }
-  if (isNestedType(type)) {
+  if (isNestedType2(type)) {
     const baseNode = findNode(type, isDiscriminatedUnion);
     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,
@@ -842,17 +921,33 @@ var FormField = (props) => {
         createOptionIcon,
         createInitialValuePath,
         db,
-        useSchema: schemaHook,
+        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;
   }
@@ -871,12 +966,283 @@ 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/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
+      });
+    }
+    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 name = requireAttr(token.attrs, "name", "field", token.position);
+      const spanRaw = token.attrs.span;
+      const span = spanRaw !== void 0 ? parseInteger(spanRaw, "span", "field", token.position) : void 0;
+      index += 1;
+      return {
+        kind: "field",
+        name,
+        span
+      };
+    }
+    if (token.name === "grid") {
+      if (token.selfClosing) {
+        throw new LayoutParseError("<grid> must wrap children (cannot self-close)", token.position);
+      }
+      const cols = parseInteger(requireAttr(token.attrs, "cols", "grid", token.position), "cols", "grid", token.position);
+      index += 1;
+      const children = [];
+      while (index < tokens.length && !(tokens[index].type === "close" && tokens[index].name === "grid")) {
+        children.push(parseNode());
+      }
+      const closing = tokens[index];
+      if (!closing || closing.type !== "close" || closing.name !== "grid") {
+        throw new LayoutParseError("<grid> not closed", token.position);
+      }
+      index += 1;
+      return {
+        kind: "grid",
+        cols,
+        children
+      };
+    }
+    throw new LayoutParseError(`unknown element <${token.name}>`, token.position);
+  };
+  const root = parseNode();
+  if (index !== tokens.length) {
+    const trailing = tokens[index];
+    throw new LayoutParseError(`unexpected trailing tag <${trailing.type === "open" ? "" : "/"}${trailing.name}>`, trailing.position);
+  }
+  if (root.kind !== "grid") {
+    throw new LayoutParseError("root element must be <grid>");
+  }
+  return root;
+};
+
+// 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, ...props }) => {
+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,
@@ -888,18 +1254,35 @@ var FormFieldSet = ({ label, schema, readonly, path, sort, exclude, projection,
   if ((readonly || layout === "static") && values == null) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, 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: [
@@ -915,7 +1298,7 @@ var FormFieldSet = ({ label, schema, readonly, path, sort, exclude, projection,
 };
 FormFieldSet.displayName = FORM_FIELDSET_NAME;
 var useFormFieldSetProperties = ({ schema, exclude, projection, values, sort }) => {
-  return useMemo3(() => {
+  return useMemo4(() => {
     if (!schema) {
       return [];
     }
@@ -951,25 +1334,28 @@ var useFormFieldSetProperties = ({ schema, exclude, projection, values, sort })
 };
 
 // src/components/Form/Form.tsx
-var omitId = (schema) => schema.pipe(Schema2.omit("id"));
+var omitId = (schemaOrType) => {
+  const schema = Type.isType(schemaOrType) ? Type.getSchema(schemaOrType) : schemaOrType;
+  return schema.pipe(Schema3.omit("id"));
+};
 var omitHiddenFormFields = (schema) => {
-  const properties = SchemaAST4.getPropertySignatures(schema.ast);
-  const hidden = properties.filter((prop) => Option3.getOrElse(EchoAnnotation.FormInputAnnotation.getFromAst(prop.type), () => true) === false).map((prop) => prop.name);
-  return hidden.length === 0 ? schema : schema.pipe(Schema2.omit(...hidden));
+  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] = createContext("Form");
+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);
   useEffect2(() => {
     if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
       lastAppliedPathRef.current = jsonPath;
-      onValueChange(stablePath, SchemaAST4.stringKeyword, defaultValue());
+      onValueChange(stablePath, SchemaAST5.stringKeyword, defaultValue());
     }
   }, [
     value3,
@@ -981,11 +1367,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),
@@ -1006,22 +1392,42 @@ 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 = composable(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+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),
-    orientation: "vertical",
-    centered: true,
-    padding: true,
-    thin: true,
+    gutter,
+    classNames: [
+      "w-full min-w-0",
+      span
+    ],
     ref: forwardedRef
-  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
+  }, children);
 });
 FormViewport.displayName = FORM_VIEWPORT_NAME;
 var FORM_CONTENT_NAME = "Form.Content";
@@ -1033,10 +1439,10 @@ var FormContent = composable(({ children, ...props }, forwardedRef) => {
     localRef
   ]);
   useKeyHandler(localRef, form);
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     ...composableProps(props, {
       role: "form",
-      classNames: mx(withColumn.center(), "flex flex-col w-full pb-form-gap")
+      classNames: mx3(withColumn.center(), "flex flex-col w-full")
     }),
     "data-testid": testId,
     ref: mergedRef
@@ -1046,13 +1452,27 @@ 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(translationKey2);
@@ -1060,15 +1480,15 @@ var FormActions = ({ classNames }) => {
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    className: mx(withColumn.center(), "grid grid-flow-col gap-form-gap 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"),
     onClick: onCancel,
     "data-testid": "cancel-button"
-  }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
+  }), onSave && /* @__PURE__ */ React5.createElement(IconButton2, {
     type: "submit",
     variant: "primary",
     disabled: !canSave,
@@ -1082,14 +1502,14 @@ var FormActions = ({ classNames }) => {
 FormActions.displayName = FORM_ACTIONS_NAME;
 var FORM_SECTION_NAME = "Form.Section";
 var FormSection = composable(({ children, label, description, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     ...composableProps(props, {
       classNames: "flex flex-col pt-form-section-gap first:pt-0"
     }),
     ref: forwardedRef
-  }, label && /* @__PURE__ */ React4.createElement("h2", {
+  }, label && /* @__PURE__ */ React5.createElement("h2", {
     className: "text-lg"
-  }, label), description && /* @__PURE__ */ React4.createElement("p", {
+  }, label), description && /* @__PURE__ */ React5.createElement("p", {
     className: "text-description"
   }, description), children);
 });
@@ -1101,9 +1521,9 @@ var FormSubmit = ({ classNames, label, icon, disabled }) => {
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    className: mx("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",
@@ -1115,15 +1535,29 @@ var FormSubmit = ({ classNames, label, icon, disabled }) => {
   }));
 };
 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
@@ -1133,13 +1567,13 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
   const { onValueChange } = inputProps;
   const values = useFormValues(ArrayField.displayName, path, () => []);
   const getDefaultObjectValue = (typeNode) => {
-    const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
-    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST5.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 = SchemaAST5.getDefaultAnnotation(prop.type).pipe((annotation) => Option4.getOrUndefined(annotation));
+      const defaultValue = SchemaAST6.getDefaultAnnotation(prop.type).pipe((annotation) => Option6.getOrUndefined(annotation));
       return [
         prop.name,
         defaultValue
@@ -1147,9 +1581,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
     ]);
   }, [
@@ -1168,43 +1602,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", {
-    className: "flex flex-col gap-form-gap"
+  })), !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", {
-      key: index,
-      className: "grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center"
-    }, /* @__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", {
-      className: "flex flex-col h-full justify-end"
-    }, /* @__PURE__ */ React5.createElement("div", {
-      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("remove.button"),
-      onClick: () => handleDelete(index),
-      classNames: "self-center"
-    }))));
-  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
-    classNames: "flex w-full",
-    icon: "ph--plus--regular",
-    label: t("add-item.button"),
-    onClick: handleAdd
-  }));
+      label: t("remove-item.button"),
+      onClick: () => handleDelete(index)
+    }));
+  })));
 };
 ArrayField.displayName = "Form.ArrayField";
 var getDefaultValue = (ast) => {
@@ -1222,7 +1662,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}`);
@@ -1232,39 +1672,112 @@ 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 useEffect3, 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";
 import { translationKey as translationKey4 } from "#translations";
-var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
+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());
@@ -1276,7 +1789,7 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
   }, [
     geoPoint
   ]);
-  const handleChange = useCallback5((coordinateType, setText) => (event) => {
+  const handleChange = useCallback6((coordinateType, setText) => (event) => {
     const inputText = event.target.value;
     setText(inputText);
     if (inputText !== "" && inputText !== "-") {
@@ -1302,16 +1815,17 @@ 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", {
+  }), layout === "static" ? /* @__PURE__ */ React9.createElement(LatLng, value3) : /* @__PURE__ */ React9.createElement("div", {
     className: "grid grid-cols-2 gap-form-gap"
-  }, /* @__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, {
+  }, /* @__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",
@@ -1321,7 +1835,7 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
     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",
@@ -1336,30 +1850,128 @@ 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", {
+  return /* @__PURE__ */ React9.createElement("span", {
     className: "inline-flex items-center gap-form-gap"
-  }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+  }, /* @__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
+// src/components/Form/fields/InlineRefField.tsx
 import { useAtomValue } from "@effect-atom/atom-react";
-import React8, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
-import { Obj, Ref as Ref2 } from "@dxos/echo";
+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
+  ]);
+  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));
+    }
+  }, [
+    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, Icon as Icon2, Input as Input4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+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 translationKey5 } from "#translations";
+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, placeholder, layout, db, getStatus, getValue, onValueChange }) => {
+var MarkdownField = ({ type, readonly, label, jsonPath, placeholder, layout, db, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus();
-  const isRef = Ref2.isRefType(type);
+  const isRef = Ref4.isRefType(type);
   const value3 = getValue();
   if ((readonly || layout === "static") && value3 == null) {
     return null;
@@ -1368,7 +1980,7 @@ var MarkdownField = ({ type, readonly, label, placeholder, layout, db, getStatus
     if (isRef) {
       const reference = value3;
       if (reference) {
-        return /* @__PURE__ */ React8.createElement(RefMarkdownEditor, {
+        return /* @__PURE__ */ React11.createElement(RefMarkdownEditor, {
           reference,
           placeholder
         });
@@ -1376,13 +1988,13 @@ var MarkdownField = ({ type, readonly, label, placeholder, layout, db, getStatus
       if (readonly) {
         return null;
       }
-      return /* @__PURE__ */ React8.createElement(CreateTextButton, {
+      return /* @__PURE__ */ React11.createElement(CreateTextButton, {
         db,
         disabled: !db,
         onCreate: (ref) => onValueChange(type, ref)
       });
     }
-    return /* @__PURE__ */ React8.createElement(StringMarkdownEditor, {
+    return /* @__PURE__ */ React11.createElement(StringMarkdownEditor, {
       value: value3 ?? "",
       placeholder,
       readonly: !!readonly,
@@ -1392,40 +2004,41 @@ var MarkdownField = ({ type, readonly, label, placeholder, layout, db, getStatus
   const renderStatic = () => {
     if (isRef) {
       const reference = value3;
-      return reference ? /* @__PURE__ */ React8.createElement(RefStaticText, {
+      return reference ? /* @__PURE__ */ React11.createElement(RefStaticText, {
         reference
       }) : null;
     }
-    return /* @__PURE__ */ React8.createElement("p", {
+    return /* @__PURE__ */ React11.createElement("p", {
       className: "whitespace-pre-wrap"
     }, value3 ?? "");
   };
-  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+  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" ? renderStatic() : renderEditor(), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
+    label,
+    path: jsonPath
+  }), layout === "static" ? renderStatic() : renderEditor(), layout === "full" && /* @__PURE__ */ React11.createElement(Input8.Validation, null, error));
 };
 var RefStaticText = ({ reference }) => {
-  const text = useAtomValue(useMemo6(() => AtomRef.make(reference), [
+  const text = useAtomValue2(useMemo8(() => AtomRef2.make(reference), [
     reference
   ]));
   if (!text?.content) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement("p", {
+  return /* @__PURE__ */ React11.createElement("p", {
     className: "whitespace-pre-wrap"
   }, text.content);
 };
 var RefMarkdownEditor = ({ reference, placeholder }) => {
-  const text = useAtomValue(useMemo6(() => AtomRef.make(reference), [
+  const text = useAtomValue2(useMemo8(() => AtomRef2.make(reference), [
     reference
   ]));
-  const dataExtensions = useMemo6(() => text ? [
+  const dataExtensions = useMemo8(() => text ? [
     createDataExtensions({
-      id: reference.dxn.toString(),
+      id: reference.uri,
       text: createDocAccessor(text, [
         "content"
       ])
@@ -1441,7 +2054,7 @@ var RefMarkdownEditor = ({ reference, placeholder }) => {
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Editor.Root, null, /* @__PURE__ */ React8.createElement(Editor.View, {
+  return /* @__PURE__ */ React11.createElement(Editor.Root, null, /* @__PURE__ */ React11.createElement(Editor.View, {
     classNames: editorClassNames,
     extensions
   }));
@@ -1450,10 +2063,10 @@ var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange })
   const extensions = useBasicMarkdownExtensions({
     placeholder
   });
-  const handleChange = useCallback6((next) => onChange(next), [
+  const handleChange = useCallback8((next) => onChange(next), [
     onChange
   ]);
-  return /* @__PURE__ */ React8.createElement(Editor.Root, null, /* @__PURE__ */ React8.createElement(Editor.View, {
+  return /* @__PURE__ */ React11.createElement(Editor.Root, null, /* @__PURE__ */ React11.createElement(Editor.View, {
     classNames: editorClassNames,
     extensions,
     value: value3,
@@ -1461,41 +2074,41 @@ var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange })
   }));
 };
 var CreateTextButton = ({ db, disabled, onCreate }) => {
-  const { t } = useTranslation5(translationKey5);
-  const handleClick = useCallback6(() => {
+  const { t } = useTranslation6(translationKey6);
+  const handleClick = useCallback8(() => {
     if (!db) {
       return;
     }
-    const text = db.add(Obj.make(Text.Text, {
+    const text = db.add(Obj2.make(Text.Text, {
       content: ""
     }));
-    onCreate(Ref2.make(text));
+    onCreate(Ref4.make(text));
   }, [
     db,
     onCreate
   ]);
-  return /* @__PURE__ */ React8.createElement(Button, {
+  return /* @__PURE__ */ React11.createElement(Button2, {
     onClick: handleClick,
     disabled
-  }, /* @__PURE__ */ React8.createElement(Icon2, {
+  }, /* @__PURE__ */ React11.createElement(Icon3, {
     icon: "ph--plus--regular",
     size: 4
-  }), /* @__PURE__ */ React8.createElement("span", null, t("create-text.label")));
+  }), /* @__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,
@@ -1506,43 +2119,43 @@ var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...prop
 };
 
 // src/components/Form/fields/RefField.tsx
-import React11, { useCallback as useCallback9, useMemo as useMemo7, useState as useState4 } from "react";
+import React14, { useCallback as useCallback11, useMemo as useMemo9, useState as useState4 } from "react";
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import { Entity, Filter, Obj as Obj2, Ref as Ref3, Type } from "@dxos/echo";
-import { useQuery, useSchema as defaultUseSchema } from "@dxos/echo-react";
-import { ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo/internal";
-import { findAnnotation as findAnnotation2 } 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 as Button2, Icon as Icon3, Input as Input6, useTranslation as useTranslation7 } 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 { translationKey as translationKey7 } from "#translations";
+import { translationKey as translationKey8 } from "#translations";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
-import React10, { forwardRef, useCallback as useCallback8, useState as useState3 } from "react";
-import { Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
+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 translationKey6 } from "#translations";
+import { translationKey as translationKey7 } from "#translations";
 var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, onSelect, onCreate, ...props }, forwardedRef) => {
-  const { t } = useTranslation6(translationKey6);
+  const { t } = useTranslation7(translationKey7);
   const [showForm, setShowForm] = useState3(false);
   const [formInitialValue, setFormInitialValue] = useState3("");
   const { results, query, handleSearch } = useSearchListResults({
     items: options
   });
-  const handleFormSave = useCallback8(async (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();
@@ -1555,11 +2168,11 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
     createSchema
   ]);
   if (showForm && createSchema) {
-    return /* @__PURE__ */ React10.createElement(Combobox.Content, {
+    return /* @__PURE__ */ React13.createElement(Combobox.Content, {
       ...props,
       onKeyDownCapture: handleKeyDown,
       ref: forwardedRef
-    }, /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
+    }, /* @__PURE__ */ React13.createElement(Popover.Viewport, null, /* @__PURE__ */ React13.createElement(Form.Root, {
       testId: "create-referenced-object-form",
       schema: createSchema,
       defaultValues: createInitialValuePath ? {
@@ -1568,25 +2181,25 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
       fieldMap: createFieldMap3,
       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(Combobox.Arrow, null));
+    }, /* @__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__ */ React10.createElement(Combobox.Content, {
+  return /* @__PURE__ */ React13.createElement(Combobox.Content, {
     ...props,
     onKeyDownCapture: handleKeyDown,
     ref: forwardedRef
-  }, /* @__PURE__ */ React10.createElement(Combobox.Input, {
+  }, /* @__PURE__ */ React13.createElement(Combobox.Input, {
     placeholder: t("ref-field-combobox-input.placeholder"),
     autoFocus: true,
     value: query,
     onValueChange: handleSearch
-  }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
+  }), /* @__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"
-  })), createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+  })), createSchema && onCreate && /* @__PURE__ */ React13.createElement(CreateItem, {
     query,
     createOptionLabel,
     createOptionIcon: createOptionIcon ?? "ph--plus--regular",
@@ -1594,15 +2207,15 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
       setFormInitialValue(currentQuery);
       setShowForm(true);
     }
-  })), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
+  })), /* @__PURE__ */ React13.createElement(Combobox.Arrow, null));
 });
 var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation6(translationKey6);
+  const { t } = useTranslation7(translationKey7);
   const label = createOptionLabel ? t(createOptionLabel[0], {
     ns: createOptionLabel[1].ns,
     text: query
   }) : t("create-option.label");
-  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
+  return /* @__PURE__ */ React13.createElement(Combobox.Item, {
     value: "__create__",
     label,
     icon: createOptionIcon,
@@ -1627,25 +2240,25 @@ 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 ? Obj2.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 defaultUseResults = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj2.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, createFieldMap: createFieldMap3, db, useSchema: useSchema2 = defaultUseSchema, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, onValueChange } = props;
-  const { t } = useTranslation7(translationKey7);
+  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 = useMemo7(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
+  const typename = useMemo9(() => type ? findAnnotation3(type, ReferenceAnnotationId3)?.typename : void 0, [
     type
   ]);
   const results = useResults(db, typename);
-  const options = useMemo7(() => {
-    const parentLabel = type ? findAnnotation2(type, ParentLabelAnnotationId) === true : false;
+  const options = useMemo9(() => {
+    const parentLabel = type ? findAnnotation3(type, ParentLabelAnnotationId) === true : false;
     return getOptions(results, {
       parentLabel
     });
@@ -1654,15 +2267,15 @@ var RefField = (props) => {
     getOptions,
     type
   ]);
-  const handleGetValue = useCallback9(() => {
+  const handleGetValue = useCallback11(() => {
     const formValue = getValue();
-    const dxnToObjectId = (dxn) => dxn.split(":").pop() ?? dxn;
+    const dxnToEntityId = (dxn) => dxn.split(/[:/]/).filter(Boolean).pop() ?? dxn;
     const unknownToRefOption = (value3) => {
-      const isRef = Ref3.isRef(value3);
+      const isRef = Ref5.isRef(value3);
       if (isRef || isRefSnapshot(value3)) {
-        const dxnString = isRef ? value3.dxn.toString() : value3["/"];
-        const objectId = dxnToObjectId(dxnString);
-        const matchingOption = options.find((option) => dxnToObjectId(option.id) === objectId);
+        const dxnString = isRef ? value3.uri : value3["/"];
+        const objectId = dxnToEntityId(dxnString);
+        const matchingOption = options.find((option) => dxnToEntityId(option.id) === objectId);
         if (matchingOption) {
           return matchingOption;
         }
@@ -1675,20 +2288,20 @@ var RefField = (props) => {
     getValue
   ]);
   const item = handleGetValue();
-  const selectedIds = useMemo7(() => item ? [
+  const selectedIds = useMemo9(() => item ? [
     item.id
   ] : [], [
     item
   ]);
-  const createSchema = useSchema2(db, typename);
+  const createSchema = useType2(db, typename);
   const [open, setOpen] = useState4(false);
-  const handleCreate = useCallback9(async (values) => {
+  const handleCreate = useCallback11(async (values) => {
     if (!createSchema || !onCreate) {
       return;
     }
     const newObject = await onCreate(createSchema, values);
     if (newObject) {
-      onValueChange(type, Ref3.make(newObject));
+      onValueChange(type, Ref5.make(newObject));
     }
     setOpen(false);
   }, [
@@ -1697,16 +2310,16 @@ var RefField = (props) => {
     type,
     onValueChange
   ]);
-  const handleUpdate = useCallback9((id) => {
+  const handleUpdate = useCallback11((id) => {
     const item2 = options.find((option) => option.id === id);
-    const ref = item2 ? Ref3.fromDXN(DXN.parse(item2.id)) : void 0;
+    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 {
@@ -1719,103 +2332,117 @@ 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", {
+    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__ */ React11.createElement(DxAnchor, {
+  }, 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, {
+  }, item.label) : /* @__PURE__ */ React14.createElement(ObjectPicker.Root, {
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+  }, /* @__PURE__ */ React14.createElement(ObjectPicker.Trigger, {
     asChild: true,
     classNames: "p-0"
-  }, item ? /* @__PURE__ */ React11.createElement("div", {
+  }, item ? /* @__PURE__ */ React14.createElement("div", {
     className: "flex gap-form-gap w-full"
-  }, /* @__PURE__ */ React11.createElement(Input6.Root, {
+  }, /* @__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(Button2, {
+  }))) : /* @__PURE__ */ React14.createElement(Button3, {
     classNames: "w-full text-start gap-form-gap"
-  }, /* @__PURE__ */ React11.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", {
     className: "grow overflow-hidden"
-  }, /* @__PURE__ */ React11.createElement("span", {
+  }, /* @__PURE__ */ React14.createElement("span", {
     className: "truncate text-description"
-  }, placeholder ?? t("ref-field.placeholder"))), /* @__PURE__ */ React11.createElement(Icon3, {
+  }, 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,
     // 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(createSchema)),
+    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 useEffect4, useRef as useRef2, useState as useState5 } 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 useTranslation8 } 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 } from "@dxos/ui-theme";
-import { translationKey as translationKey8 } from "#translations";
-var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation8(translationKey8);
+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] = useState5(null);
   const [isNewOption, setIsNewOption] = useState5(false);
@@ -1840,7 +2467,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,
@@ -1858,7 +2485,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);
@@ -1867,7 +2494,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  const handleMove = useCallback11((from, to) => {
+  const handleMove = useCallback13((from, to) => {
     if (!options) {
       return;
     }
@@ -1882,10 +2509,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
@@ -1896,12 +2523,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
@@ -1921,37 +2548,38 @@ 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", null, 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: "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", {
@@ -1959,13 +2587,13 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     }),
     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-form-gap dx-density-fine"
-  }, /* @__PURE__ */ React13.createElement(Input8.Label, {
-    classNames: "text-xs"
-  }, t("select-option.label")), /* @__PURE__ */ React13.createElement("div", {
+  })), 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__ */ React13.createElement(Input8.TextInput, {
+  }, /* @__PURE__ */ React16.createElement(Input12.TextInput, {
     disabled: !!readonly,
     placeholder: t("select-option-label.placeholder"),
     ref: selected === item.id ? inputRef : void 0,
@@ -1973,17 +2601,17 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     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.button"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
+  })))))), /* @__PURE__ */ React16.createElement(IconButton3, {
     variant: "ghost",
     icon: "ph--plus--regular",
     label: t("select-option-add.button"),
@@ -1994,17 +2622,17 @@ 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";
+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 = useCallback12((event) => onValueChange(type, event.target.value), [
+  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,
@@ -2015,18 +2643,18 @@ var TextField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props
 };
 
 // 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,
@@ -2036,9 +2664,9 @@ 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 { mx as mx2 } from "@dxos/ui-theme";
+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 = [
   "grid-cols-1",
@@ -2046,18 +2674,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: mx2("grid gap-form-gap", 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,
@@ -2072,10 +2701,20 @@ 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 } = useTranslation9(translationKey9);
+  const { t } = useTranslation10(translationKey10);
   const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
   useEffect5(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
@@ -2086,10 +2725,10 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     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?.();
   }, [
@@ -2097,7 +2736,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const [referenceSchema, setReferenceSchema] = useState6();
   useEffect5(() => {
-    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => Type4.getTypename(schema) === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
@@ -2105,34 +2744,34 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   const [{ fieldSchema }, setFieldSchema] = useState6({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const fieldMap = useMemo8(() => ({
-    ["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`)
       }))
     }),
-    ["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) {
@@ -2143,8 +2782,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;
         }
@@ -2169,7 +2808,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 [
         {
@@ -2182,9 +2821,9 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     projection.getFields(),
     field
   ]);
-  const handleSave = useCallback14((props2) => {
+  const handleSave = useCallback16((props2) => {
     if (view) {
-      Obj3.update(view, () => {
+      Obj4.update(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2203,7 +2842,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     view,
     onSave
   ]);
-  const handleCancel = useCallback14(() => {
+  const handleCancel = useCallback16(() => {
     onSave();
     requestAnimationFrame(() => onCancel?.());
   }, [
@@ -2215,7 +2854,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     }, { "~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,
@@ -2231,100 +2870,100 @@ 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/ObjectForm/ObjectForm.tsx
-import * as Schema3 from "effect/Schema";
-import React18, { useCallback as useCallback15, useMemo as useMemo9 } from "react";
-import { DXN as DXN2, Obj as Obj4, Ref as Ref4, Tag as Tag2, Type as Type2 } from "@dxos/echo";
-import { splitJsonPath } from "@dxos/echo/internal";
+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 { isNonNullable } from "@dxos/util";
-import { translationKey as translationKey10 } from "#translations";
+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 = useCallback15((nextHue) => onValueChange(type, nextHue), [
+    const handleChange = useCallback17((nextHue) => onValueChange(type, nextHue), [
       onValueChange,
       type
     ]);
-    const handleReset = useCallback15(() => onValueChange(type, void 0), [
+    const handleReset = useCallback17(() => onValueChange(type, void 0), [
       onValueChange,
       type
     ]);
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, layout !== "inline" && /* @__PURE__ */ React18.createElement(Form.Label, {
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, layout !== "inline" && /* @__PURE__ */ React21.createElement(Form.Label, {
       label
-    }), /* @__PURE__ */ React18.createElement(HuePicker2, {
+    }), /* @__PURE__ */ React21.createElement(HuePicker2, {
       value: getValue(),
       onChange: handleChange,
       onReset: handleReset
     }));
   }
 };
-var ObjectForm = ({ object, schema }) => {
-  const db = Obj4.getDatabase(object);
-  const meta = Obj4.getMeta(object);
-  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN2.parse(tag))).filter(isNonNullable);
-  const values = useMemo9(() => ({
-    tags,
+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 = useMemo9(() => omitId(Schema3.Struct({
-    tags: Schema3.Array(Ref4.Ref(Tag2.Tag)).pipe(Schema3.optional)
-  }).pipe(Schema3.extend(schema))), [
-    schema
+  const formSchema = useMemo11(() => withMetaTags(Type5.getSchema(type)), [
+    type
   ]);
-  const handleCreate = useCallback15((schema2, values2) => {
-    invariant(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 49, S: void 0, A: ["db", ""] });
-    invariant(Type2.isObjectSchema(schema2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 50, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
-    const newObject = db.add(Obj4.make(schema2, values2));
-    if (Obj4.instanceOf(Tag2.Tag, newObject)) {
-      Obj4.update(object, (object2) => {
-        Obj4.getMeta(object2).tags = [
-          ...Obj4.getMeta(object2).tags ?? [],
-          Obj4.getDXN(newObject).toString()
+  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 = useCallback15(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+  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) => splitJsonPath(path)[0] === "tags");
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath2(path)[0] === META_TAGS_KEY);
     if (hasTagsChange) {
-      Obj4.update(object, (object2) => {
-        Obj4.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      Obj5.update(object, (object2) => {
+        Obj5.getMeta(object2).tags = Array.isArray(metaTags) ? [
+          ...metaTags
+        ] : [];
       });
     }
-    const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== "tags");
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== META_TAGS_KEY);
     if (nonTagPaths.length > 0) {
-      Obj4.update(object, () => {
+      Obj5.update(object, () => {
         for (const path of nonTagPaths) {
-          const parts = splitJsonPath(path);
-          const value3 = Obj4.getValue(values2, parts);
-          Obj4.setValue(object, parts, value3);
+          const parts = splitJsonPath2(path);
+          const value3 = Obj5.getValue(values2, parts);
+          Obj5.setValue(object, parts, value3);
         }
       });
     }
   }, [
     object
   ]);
-  return /* @__PURE__ */ React18.createElement(Form.Root, {
+  return /* @__PURE__ */ React21.createElement(Form.Root, {
     schema: formSchema,
     defaultValues: values,
-    createTypename: Type2.getTypename(Tag2.Tag),
+    createTypename: Type5.getTypename(Tag3.Tag),
     createOptionIcon: "ph--plus--regular",
     createOptionLabel: [
       "add-tag.label",
       {
-        ns: translationKey10
+        ns: translationKey11
       }
     ],
     createInitialValuePath: "label",
@@ -2332,70 +2971,72 @@ var ObjectForm = ({ object, schema }) => {
     db,
     onValuesChanged: handleChange,
     onCreate: handleCreate
-  }, /* @__PURE__ */ React18.createElement(Form.Viewport, null, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null))));
+  }, /* @__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 Option5 from "effect/Option";
-import * as Schema4 from "effect/Schema";
-import React19, { useCallback as useCallback16, useMemo as useMemo10 } from "react";
-import { DXN as DXN3, Obj as Obj5, Ref as Ref5, Tag as Tag3, Type as Type3 } from "@dxos/echo";
-import { useSchema } from "@dxos/echo-react";
-import { splitJsonPath as splitJsonPath2 } from "@dxos/echo/internal";
+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 { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
-import { isNonNullable as isNonNullable2 } from "@dxos/util";
-import { translationKey as translationKey11 } from "#translations";
+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 = Obj5.getDatabase(object);
-  const meta = Obj5.getMeta(object);
-  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN3.parse(tag))).filter(isNonNullable2);
-  const values = useMemo10(() => ({
-    tags,
+  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 = Obj5.getTypename(object) ?? void 0;
-  const schemaFromRegistry = useSchema(db, typename);
-  const rawSchema = Obj5.getSchema(object) ?? schemaFromRegistry;
-  const formSchema = useMemo10(() => {
-    return Function.pipe(rawSchema, Option5.fromNullable, Option5.map((schema) => omitId(BaseSchema.pipe(Schema4.extend(schema)))), Option5.getOrUndefined);
+  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);
   }, [
-    rawSchema
+    type
   ]);
-  const handleCreate = useCallback16((schema, values2) => {
-    invariant2(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 51, S: void 0, A: ["db", ""] });
-    invariant2(Type3.isObjectSchema(schema), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 52, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
-    const factory = Option5.getOrUndefined(FactoryAnnotation.get(schema));
-    const newObject = factory ? factory(values2) : Obj5.make(schema, values2);
+  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 = useCallback16(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+  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) => splitJsonPath2(path)[0] === "tags");
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath3(path)[0] === META_TAGS_KEY);
     if (hasTagsChange) {
-      Obj5.update(object, (object2) => {
-        Obj5.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      Obj6.update(object, (object2) => {
+        Obj6.getMeta(object2).tags = Array.isArray(metaTags) ? [
+          ...metaTags
+        ] : [];
       });
     }
-    const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== "tags");
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath3(path)[0] !== META_TAGS_KEY);
     if (nonTagPaths.length > 0) {
-      Obj5.update(object, () => {
+      Obj6.update(object, () => {
         for (const path of nonTagPaths) {
-          const parts = splitJsonPath2(path);
-          const value3 = Obj5.getValue(values2, parts);
-          Obj5.setValue(object, parts, value3);
+          const parts = splitJsonPath3(path);
+          const value3 = Obj6.getValue(values2, parts);
+          Obj6.setValue(object, parts, value3);
         }
       });
     }
@@ -2405,15 +3046,15 @@ var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef
   if (!formSchema) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(Form.Root, {
+  return /* @__PURE__ */ React22.createElement(Form.Root, {
     schema: formSchema,
     defaultValues: values,
-    createTypename: Type3.getTypename(Tag3.Tag),
+    createTypename: Type6.getTypename(Tag4.Tag),
     createOptionIcon: "ph--plus--regular",
     createOptionLabel: [
       "add-tag.label",
       {
-        ns: translationKey11
+        ns: translationKey12
       }
     ],
     createInitialValuePath: "label",
@@ -2421,69 +3062,190 @@ var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef
     db,
     onValuesChanged: handleChange,
     onCreate: handleCreate
-  }, /* @__PURE__ */ React19.createElement(Form.Viewport, {
+  }, /* @__PURE__ */ React22.createElement(Form.Viewport, {
     ...composableProps2(props),
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(Form.Content, null, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), children)));
+  }, /* @__PURE__ */ React22.createElement(Form.Content, null, /* @__PURE__ */ React22.createElement(Form.FieldSet, null), children)));
 });
 var createFieldMap2 = {
   hue: ({ type, label, layout, getValue, onValueChange }) => {
-    const handleChange = useCallback16((nextHue) => onValueChange(type, nextHue), [
+    const handleChange = useCallback18((nextHue) => onValueChange(type, nextHue), [
       onValueChange,
       type
     ]);
-    const handleReset = useCallback16(() => onValueChange(type, void 0), [
+    const handleReset = useCallback18(() => onValueChange(type, void 0), [
       onValueChange,
       type
     ]);
-    return /* @__PURE__ */ React19.createElement(React19.Fragment, null, layout !== "inline" && /* @__PURE__ */ React19.createElement(Form.Label, {
+    return /* @__PURE__ */ React22.createElement(React22.Fragment, null, layout !== "inline" && /* @__PURE__ */ React22.createElement(Form.Label, {
       label
-    }), /* @__PURE__ */ React19.createElement(HuePicker3, {
+    }), /* @__PURE__ */ React22.createElement(HuePicker3, {
       value: getValue(),
       onChange: handleChange,
       onReset: handleReset
     }));
   }
 };
-var BaseSchema = Schema4.Struct({
-  tags: Schema4.Array(Ref5.Ref(Tag3.Tag)).pipe(Schema4.optional)
-});
+
+// 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 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;
+};
+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;
+};
+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"
+  });
+};
+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 React22 from "react";
-import { ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { composable as composable3, composableProps as composableProps3, mx as mx4 } from "@dxos/ui-theme";
-import { translationKey as translationKey13 } from "#translations";
+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 SchemaAST6 from "effect/SchemaAST";
-import * as String3 from "effect/String";
-import React21, { useCallback as useCallback17, useMemo as useMemo11 } from "react";
-import { getAnnotation as getAnnotation3 } from "@dxos/effect";
-import { Input as Input13, Select as Select2 } from "@dxos/react-ui";
+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 React20 from "react";
-import { Input as Input12, toLocalizedString, useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/ui-theme";
-import { translationKey as translationKey12 } from "#translations";
+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__ */ React20.createElement("div", {
-    className: mx3("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx6("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
   }, children);
 };
 SettingsPanel.displayName = SETTINGS_PANEL_NAME;
 var SettingsItem = ({ title, description = "", children }) => {
-  const { t } = useTranslation10(translationKey12);
-  return /* @__PURE__ */ React20.createElement(Input12.Root, null, /* @__PURE__ */ React20.createElement(SettingsPanel, {
+  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__ */ React20.createElement(Input12.Label, {
-    classNames: "pb-trim-md text-base-foreground text-lg md:col-span-2"
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React20.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React20.createElement(Input12.Description, {
+  }, /* @__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__ */ React20.createElement("div", {
+  }, toLocalizedString(description, t))), /* @__PURE__ */ React24.createElement("div", {
     className: "text-end py-1"
   }, children)));
 };
@@ -2491,7 +3253,7 @@ SettingsItem.displayName = SETTINGS_ITEM_NAME;
 
 // src/components/Settings/SettingsFieldSet.tsx
 var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, visible, sort, pathPrefix = "" }) => {
-  const properties = useMemo11(() => {
+  const properties = useMemo13(() => {
     const props = getFormProperties(schema.ast);
     if (!sort) {
       return props;
@@ -2507,7 +3269,7 @@ var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, v
     schema,
     sort
   ]);
-  const handleChange = useCallback17((name, value3) => {
+  const handleChange = useCallback19((name, value3) => {
     onValuesChanged?.({
       ...values,
       [name]: value3
@@ -2516,14 +3278,14 @@ var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, v
     values,
     onValuesChanged
   ]);
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, properties.map((property) => {
+  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__ */ React21.createElement(SettingsFieldItem, {
+    return /* @__PURE__ */ React25.createElement(SettingsFieldItem, {
       key: name,
       path,
       property,
@@ -2541,14 +3303,14 @@ 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 = getAnnotation3(SchemaAST6.TitleAnnotationId)(type) ?? String3.capitalize(name);
-  const description = getAnnotation3(SchemaAST6.DescriptionAnnotationId)(type);
+  const title = getAnnotation4(SchemaAST8.TitleAnnotationId)(type) ?? String4.capitalize(name);
+  const description = getAnnotation4(SchemaAST8.DescriptionAnnotationId)(type);
   if (customField) {
     const CustomField = customField;
-    return /* @__PURE__ */ React21.createElement(SettingsItem, {
+    return /* @__PURE__ */ React25.createElement(SettingsItem, {
       title,
       description
-    }, /* @__PURE__ */ React21.createElement(CustomField, {
+    }, /* @__PURE__ */ React25.createElement(CustomField, {
       value: value3,
       onChange,
       readonly
@@ -2557,7 +3319,7 @@ var SettingsFieldItem = ({ property, path, value: value3, onChange, readonly, cu
   const fieldType = detectFieldType(type);
   switch (fieldType) {
     case "struct":
-      return /* @__PURE__ */ React21.createElement(SettingsFieldSet, {
+      return /* @__PURE__ */ React25.createElement(SettingsFieldSet, {
         schema: {
           ast: type
         },
@@ -2570,47 +3332,47 @@ var SettingsFieldItem = ({ property, path, value: value3, onChange, readonly, cu
         pathPrefix: path
       });
     case "boolean":
-      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
         title,
         description
-      }, /* @__PURE__ */ React21.createElement(Input13.Switch, {
+      }, /* @__PURE__ */ React25.createElement(Input17.Switch, {
         disabled: readonly,
         checked: !!value3,
         onCheckedChange: (checked) => onChange(!!checked)
       }));
     case "select": {
       const options = getSelectOptionsFromAst(type) ?? [];
-      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
         title,
         description
-      }, /* @__PURE__ */ React21.createElement(Select2.Root, {
+      }, /* @__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__ */ React21.createElement(Select2.TriggerButton, {
+      }, /* @__PURE__ */ React25.createElement(Select2.TriggerButton, {
         disabled: readonly
-      }), /* @__PURE__ */ React21.createElement(Select2.Portal, null, /* @__PURE__ */ React21.createElement(Select2.Content, null, /* @__PURE__ */ React21.createElement(Select2.Viewport, null, options.map((option) => /* @__PURE__ */ React21.createElement(Select2.Option, {
+      }), /* @__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__ */ React21.createElement(Select2.Arrow, null)))));
+      }, option.label ?? globalThis.String(option.value)))), /* @__PURE__ */ React25.createElement(Select2.Arrow, null)))));
     }
     case "string":
-      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
         title,
         description
-      }, /* @__PURE__ */ React21.createElement(Input13.TextInput, {
+      }, /* @__PURE__ */ React25.createElement(Input17.TextInput, {
         disabled: readonly,
         value: value3 ?? "",
         onChange: (event) => onChange(event.target.value)
       }));
     case "number":
-      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+      return /* @__PURE__ */ React25.createElement(SettingsItem, {
         title,
         description
-      }, /* @__PURE__ */ React21.createElement(Input13.TextInput, {
+      }, /* @__PURE__ */ React25.createElement(Input17.TextInput, {
         disabled: readonly,
         type: "number",
         value: value3 ?? "",
@@ -2633,32 +3395,32 @@ var SETTINGS_ROOT_NAME = "Settings.Root";
 var SETTINGS_VIEWPORT_NAME = "Settings.Viewport";
 var SETTINGS_SECTION_NAME = "Settings.Section";
 var SettingsRoot = ({ children, classNames }) => {
-  return /* @__PURE__ */ React22.createElement("div", {
-    className: mx4("flex flex-col gap-2", classNames)
+  return /* @__PURE__ */ React26.createElement("div", {
+    className: mx7("flex flex-col gap-2", classNames)
   }, children);
 };
 SettingsRoot.displayName = SETTINGS_ROOT_NAME;
-var SettingsViewport = composable3(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React22.createElement(ScrollArea2.Root, {
-    ...composableProps3(props),
+var SettingsViewport = composable4(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React26.createElement(ScrollArea2.Root, {
+    ...composableProps4(props),
     orientation: "vertical",
     centered: true,
     thin: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(ScrollArea2.Viewport, {
+  }, /* @__PURE__ */ React26.createElement(ScrollArea2.Viewport, {
     classNames: "px-4 pointer-coarse:px-2"
-  }, /* @__PURE__ */ React22.createElement("div", {
+  }, /* @__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 } = useTranslation11(translationKey13);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("h2", {
+  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__ */ React22.createElement("p", {
+  }, toLocalizedString2(title, t)), description && /* @__PURE__ */ React26.createElement("p", {
     className: "px-trim-md text-description"
-  }, toLocalizedString2(description, t)), /* @__PURE__ */ React22.createElement("div", {
+  }, toLocalizedString2(description, t)), /* @__PURE__ */ React26.createElement("div", {
     className: "w-full pt-trim-md space-y-trim-md"
   }, children));
 };
@@ -2673,7 +3435,7 @@ var Settings = {
 };
 
 // src/components/Settings/SettingsSelectField.tsx
-import React23 from "react";
+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" ? {
@@ -2682,45 +3444,43 @@ var createSelectField = ({ options, defaultLabel = "Default" }) => {
   } : option);
   const hasDefault = defaultLabel !== null;
   const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : "";
-  return ({ value: value3, onChange, readonly }) => /* @__PURE__ */ React23.createElement(Select3.Root, {
+  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__ */ React23.createElement(Select3.TriggerButton, {
+  }, /* @__PURE__ */ React27.createElement(Select3.TriggerButton, {
     disabled: readonly
-  }), /* @__PURE__ */ React23.createElement(Select3.Portal, null, /* @__PURE__ */ React23.createElement(Select3.Content, null, /* @__PURE__ */ React23.createElement(Select3.Viewport, null, hasDefault && /* @__PURE__ */ React23.createElement(Select3.Option, {
+  }), /* @__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__ */ React23.createElement(Select3.Option, {
+  }, defaultLabel), normalized.map((option) => /* @__PURE__ */ React27.createElement(Select3.Option, {
     key: option.value,
     value: option.value
-  }, option.label ?? option.value))), /* @__PURE__ */ React23.createElement(Select3.Arrow, null))));
+  }, option.label ?? option.value))), /* @__PURE__ */ React27.createElement(Select3.Arrow, null))));
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
-import * as Array4 from "effect/Array";
 import * as Match2 from "effect/Match";
-import * as Option6 from "effect/Option";
+import * as Option8 from "effect/Option";
 import * as Schema5 from "effect/Schema";
-import React24, { forwardRef as forwardRef2, useCallback as useCallback18, useContext, useImperativeHandle, useMemo as useMemo12, useState as useState7 } from "react";
-import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj6, Query, QueryAST, Ref as Ref6, View } from "@dxos/echo";
-import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
+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 Input14, Message, useTranslation as useTranslation12 } 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 mx5, osTranslations as osTranslations2 } from "@dxos/ui-theme";
-import { translationKey as translationKey14 } from "#translations";
+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, schema, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
-  const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation12(translationKey14);
-  const projectionModel = useMemo12(() => {
-    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+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,
@@ -2730,7 +3490,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     return model;
   }, [
     atomRegistry,
-    schema,
+    type,
     view
   ]);
   useImperativeHandle(forwardedRef, () => projectionModel, [
@@ -2742,22 +3502,23 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     if (from._tag !== "scope") {
       return void 0;
     }
-    return Option6.fromNullable(from.scope.feeds).pipe(Option6.flatMap((feeds2) => Array4.head(feeds2)), Option6.map(String), Option6.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 = useMemo12(() => {
+  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 ? Ref6.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 = useMemo12(() => {
+  const viewSchema = useMemo14(() => {
     const base = Schema5.Struct({
-      query: mode === "schema" ? Format5.URL.annotations({
+      query: mode === "schema" ? Format7.URL.annotations({
         title: "Record type"
       }) : QueryAST.Query.annotations({
         title: "Query"
@@ -2767,7 +3528,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
       return Schema5.Struct({
         ...base.fields,
         // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
-        target: Ref6.Ref(Feed.Feed).pipe(Schema5.annotations({
+        target: Ref8.Ref(Feed.Feed).pipe(Schema5.annotations({
           title: "Target Feed"
         }), ParentLabelAnnotation.set(true), Schema5.optional)
       }).pipe(Schema5.mutable);
@@ -2776,7 +3537,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
   }, [
     mode
   ]);
-  const viewValues = useMemo12(() => ({
+  const viewValues = useMemo14(() => ({
     query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
     target: targetRef
   }), [
@@ -2784,7 +3545,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     view.query.ast,
     targetRef
   ]);
-  const fieldMap = useMemo12(() => mode === "tag" ? customFields({
+  const fieldMap = useMemo14(() => mode === "tag" ? customFields({
     types,
     tags
   }) : void 0, [
@@ -2792,46 +3553,46 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleUpdate = useCallback18((values) => {
+  const handleUpdate = useCallback20((values) => {
     const targetValue = values.target;
-    let feedDXN;
-    if (Ref6.isRef(targetValue)) {
-      const targetDXN = targetValue.dxn.toString();
-      const feed = feeds.find((feed2) => Obj6.getDXN(feed2).toString() === targetDXN);
+    let queueDxn;
+    if (Ref8.isRef(targetValue)) {
+      const feedUri = targetValue.uri;
+      const feed = feeds.find((feed2) => Obj7.getURI(feed2) === feedUri);
       if (feed) {
-        feedDXN = 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));
-    onQueryChanged?.(query, feedDXN);
+    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 = useCallback18((fieldId) => {
-    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 126, 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__ */ React24.createElement("div", {
-    className: mx5(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React24.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__ */ React24.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React24.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__ */ React24.createElement(Form.FieldSet, null), /* @__PURE__ */ React24.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React28.createElement(Form.FieldSet, null), /* @__PURE__ */ React28.createElement(FormFieldLabel, {
     label: t("fields.label"),
     asChild: true
-  }), /* @__PURE__ */ React24.createElement(FieldList, {
-    schema,
+  }), /* @__PURE__ */ React28.createElement(FieldList, {
+    type,
     view,
     registry,
     readonly,
@@ -2839,14 +3600,14 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ 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 } = useTranslation12(translationKey14);
+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 = useMemo12(() => {
-    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,
@@ -2856,25 +3617,25 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     return model;
   }, [
     atomRegistry,
-    schema,
+    type,
     view
   ]);
   const [expandedField, setExpandedField] = useState7();
-  const handleAdd = useCallback18(() => {
-    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 181, S: void 0, A: ["!readonly", ""] });
+  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 = useCallback18((field) => {
+  const handleToggleField = useCallback20((field) => {
     setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
   }, [
     readonly
   ]);
-  const handleDelete = useCallback18((fieldId) => {
-    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 194, 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);
     }
@@ -2884,9 +3645,9 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     onDelete,
     readonly
   ]);
-  const handleMove = useCallback18((fromIndex, toIndex) => {
-    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 205, S: void 0, A: ["!readonly", ""] });
-    Obj6.update(view, (view2) => {
+  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 = [
         ...view2.projection.fields
       ];
@@ -2898,14 +3659,14 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     view,
     readonly
   ]);
-  const handleClose = useCallback18(() => setExpandedField(void 0), []);
-  const handleHide = useCallback18((fieldId) => {
+  const handleClose = useCallback20(() => setExpandedField(void 0), []);
+  const handleHide = useCallback20((fieldId) => {
     setExpandedField(void 0);
     projectionModel.hideFieldProjection(fieldId);
   }, [
     projectionModel
   ]);
-  const handleShow = useCallback18((property) => {
+  const handleShow = useCallback20((property) => {
     setExpandedField(void 0);
     projectionModel.showFieldProjection(property);
   }, [
@@ -2914,45 +3675,45 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   if (!viewSnapshot) {
     return null;
   }
-  return /* @__PURE__ */ React24.createElement(List2.Root, {
+  return /* @__PURE__ */ React28.createElement(List2.Root, {
     items: viewSnapshot.projection.fields,
     isItem: Schema5.is(View.FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
     readonly
-  }, ({ items: fields }) => /* @__PURE__ */ React24.createElement(React24.Fragment, null, showHeading && /* @__PURE__ */ React24.createElement("h3", {
+  }, ({ items: fields }) => /* @__PURE__ */ React28.createElement(React28.Fragment, null, showHeading && /* @__PURE__ */ React28.createElement("h3", {
     className: "text-sm"
-  }, t("field-path.label")), /* @__PURE__ */ React24.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__ */ React24.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__ */ React24.createElement("div", {
+    }, /* @__PURE__ */ React28.createElement("div", {
       className: "grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover"
-    }, /* @__PURE__ */ React24.createElement(List2.ItemDragHandle, {
+    }, /* @__PURE__ */ React28.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
-    }), /* @__PURE__ */ React24.createElement(List2.ItemTitle, {
+    }), /* @__PURE__ */ React28.createElement(List2.ItemTitle, {
       classNames: hidden && "text-subdued",
       onClick: () => handleToggleField(field)
-    }, field.path), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
+    }, 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__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(List2.ItemDeleteButton, {
+    }), !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__ */ React24.createElement(List2.ItemIconButton, {
+    }), /* @__PURE__ */ React28.createElement(List2.ItemIconButton, {
       iconOnly: true,
       variant: "ghost",
       label: t("toggle-expand.label", {
@@ -2961,18 +3722,18 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleToggleField(field),
       "data-testid": "field.toggle"
-    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React24.createElement("div", {
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React28.createElement("div", {
       className: "col-span-full mt-1 mb-1 border border-separator rounded-md"
-    }, /* @__PURE__ */ React24.createElement(FieldEditor, {
+    }, /* @__PURE__ */ React28.createElement(FieldEditor, {
       readonly: readonly || schemaReadonly,
       registry,
       projection: projectionModel,
       field,
       onSave: handleClose
     })));
-  })), !readonly && !expandedField && /* @__PURE__ */ React24.createElement("div", {
+  })), !readonly && !expandedField && /* @__PURE__ */ React28.createElement("div", {
     className: "my-form-padding"
-  }, /* @__PURE__ */ React24.createElement(IconButton4, {
+  }, /* @__PURE__ */ React28.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("add-property-button.label"),
     onClick: handleAdd,
@@ -2982,13 +3743,13 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
 };
 var customFields = ({ types, tags }) => ({
   query: ({ type, readonly, label, getValue, onValueChange }) => {
-    const handleChange = useCallback18((query) => onValueChange(type, query.ast), [
+    const handleChange = useCallback20((query) => onValueChange(type, query.ast), [
       onValueChange
     ]);
-    return /* @__PURE__ */ React24.createElement(Input14.Root, null, /* @__PURE__ */ React24.createElement(FormFieldLabel, {
+    return /* @__PURE__ */ React28.createElement(Input18.Root, null, /* @__PURE__ */ React28.createElement(FormFieldLabel, {
       readonly,
       label
-    }), /* @__PURE__ */ React24.createElement(QueryForm, {
+    }), /* @__PURE__ */ React28.createElement(QueryForm, {
       initialQuery: getValue(),
       types,
       tags,
@@ -2999,17 +3760,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,
@@ -3029,12 +3800,15 @@ export {
   getSelectOptionsFromAst,
   omitHiddenFormFields,
   omitId,
+  parseLayout,
   parseValue,
   pathNotUniqueError,
   useFormContext,
   useFormFieldState,
   useFormHandler,
+  useFormTooltips,
   useFormValues,
-  useKeyHandler
+  useKeyHandler,
+  withMetaTags
 };
 //# sourceMappingURL=index.mjs.map