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

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

@@ -1,4677 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-
-// src/annotations.ts
-import { createAnnotationHelper } from "@dxos/echo/internal";
-var OptionsLookupAnnotationId = /* @__PURE__ */ Symbol.for("@dxos/schema/annotation/OptionsLookup");
-var OptionsLookupAnnotation = createAnnotationHelper(OptionsLookupAnnotationId);
-var optionsLookup = () => (deps, load, options) => ({
-  deps,
-  load,
-  combobox: options?.combobox
-});
-var AutofillAnnotationId = /* @__PURE__ */ Symbol.for("@dxos/schema/annotation/Autofill");
-var AutofillAnnotation = createAnnotationHelper(AutofillAnnotationId);
-var autofill = () => (deps, derive) => ({
-  deps,
-  derive
-});
-
-// src/components/FieldEditor/FieldEditor.tsx
-import React26, { useCallback as useCallback18, useEffect as useEffect9, useMemo as useMemo13, useState as useState10 } from "react";
-import { Filter as Filter2, Obj as Obj3, Type as Type4 } from "@dxos/echo";
-import { Format as Format6, FormatEnums, formatToType } from "@dxos/echo/Format";
-import { log as log3 } from "@dxos/log";
-import { useAsyncEffect, useTranslation as useTranslation11 } from "@dxos/react-ui";
-import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
-import { translationKey as translationKey11 } from "#translations";
-
-// src/util/field.ts
-import { Format, GeoLocation, TypeEnum } from "@dxos/echo/Format";
-var parseValue = ({ type, format, value: value3 }) => {
-  if (value3 === void 0 || value3 === null || value3 === "") {
-    return void 0;
-  }
-  const parseScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum.Boolean: {
-        if (typeof value3 === "string") {
-          const lowercaseValue = value3.toLowerCase();
-          if (lowercaseValue === "0" || lowercaseValue === "false") {
-            return false;
-          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
-            return true;
-          }
-        }
-        return Boolean(value3);
-      }
-      case TypeEnum.Number: {
-        const cleaned = typeof value3 === "string" ? value3.replace(/[^0-9.-]+/g, "") : value3;
-        const num = Number(cleaned);
-        return Number.isNaN(num) ? null : num;
-      }
-      case TypeEnum.String:
-      case TypeEnum.Ref:
-        return String(value3);
-      default: {
-        return value3;
-      }
-    }
-  };
-  if (!format) {
-    return parseScalar(type);
-  }
-  switch (format) {
-    case Format.TypeFormat.Boolean:
-      return parseScalar(TypeEnum.Boolean);
-    case Format.TypeFormat.Number:
-    case Format.TypeFormat.Percent:
-    case Format.TypeFormat.Currency:
-      return parseScalar(TypeEnum.Number);
-    case Format.TypeFormat.String:
-    case Format.TypeFormat.Markdown: {
-      return parseScalar(TypeEnum.String);
-    }
-    case Format.TypeFormat.Ref:
-      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
-    case Format.TypeFormat.DateTime:
-    case Format.TypeFormat.Date:
-    case Format.TypeFormat.Time:
-    case Format.TypeFormat.Timestamp: {
-      const date = new Date(value3);
-      return isNaN(date.getTime()) ? null : date;
-    }
-    case Format.TypeFormat.GeoPoint: {
-      if (typeof value3 === "string") {
-        const cleaned = value3.replace(/[^0-9.,-]+/g, "");
-        const parts = cleaned.split(",");
-        if (parts.length === 2) {
-          const lat = parseFloat(parts[0]);
-          const long = parseFloat(parts[1]);
-          if (!isNaN(lat) && !isNaN(long)) {
-            return GeoLocation.toGeoPoint({
-              latitude: lat,
-              longitude: long
-            });
-          }
-        }
-      }
-      return [
-        0,
-        0
-      ];
-    }
-    default: {
-      return value3;
-    }
-  }
-};
-var cellClassesForFieldType = ({ type, format }) => {
-  switch (format || type) {
-    case Format.TypeFormat.Markdown:
-      return void 0;
-    case Format.TypeFormat.Time:
-    case Format.TypeFormat.Timestamp:
-    case Format.TypeFormat.DateTime:
-    case Format.TypeFormat.Date:
-    case Format.TypeFormat.Duration:
-      return [
-        "font-mono",
-        "text-right"
-      ];
-    case Format.TypeFormat.Currency:
-      return [
-        "text-right"
-      ];
-    case Format.TypeFormat.JSON:
-    case Format.TypeFormat.DID:
-      return [
-        "font-mono"
-      ];
-    case TypeEnum.Number:
-    case TypeEnum.Boolean:
-      return [
-        "text-right",
-        "font-mono"
-      ];
-    case TypeEnum.String:
-      return void 0;
-    case TypeEnum.Ref:
-      return void 0;
-    default:
-      return void 0;
-  }
-};
-var pathNotUniqueError = (path) => ({
-  path: "path",
-  message: `'${path}' is already present`
-});
-
-// src/util/formatting.ts
-import { format as formatDate } from "date-fns/format";
-import { Format as Format2, GeoLocation as GeoLocation2, TypeEnum as TypeEnum2 } from "@dxos/echo/Format";
-var formatForDisplay = ({ type, format, value: value3, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-        return value3.toLocaleString().toUpperCase();
-      case TypeEnum2.Number:
-        return value3.toLocaleString(locale);
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value3);
-      default: {
-        return String(value3);
-      }
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case Format2.TypeFormat.Boolean: {
-      return formatScalar(TypeEnum2.Boolean);
-    }
-    case Format2.TypeFormat.Number: {
-      return formatScalar(TypeEnum2.Number);
-    }
-    case Format2.TypeFormat.String:
-    case Format2.TypeFormat.Ref: {
-      return formatScalar(TypeEnum2.String);
-    }
-    case Format2.TypeFormat.Percent: {
-      return `${value3 * 100}%`;
-    }
-    case Format2.TypeFormat.Currency: {
-      return value3.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-    }
-    case Format2.TypeFormat.Date: {
-      try {
-        return formatDate(new Date(value3), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
-    }
-    case Format2.TypeFormat.Time: {
-      try {
-        return formatDate(new Date(value3), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
-    }
-    case Format2.TypeFormat.DateTime: {
-      try {
-        return formatDate(new Date(value3), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
-    }
-    case Format2.TypeFormat.GeoPoint: {
-      if (value3 === null || value3 === void 0) {
-        return "";
-      }
-      if (Array.isArray(value3) && value3.length >= 2 && value3.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation2.fromGeoPoint(value3);
-        return `${latitude},${longitude}`;
-      }
-      return String(value3);
-    }
-    default: {
-      if (value3 === null || value3 === "undefined") {
-        return "";
-      }
-      return String(value3);
-    }
-  }
-};
-var formatForEditing = ({ type, format, value: value3, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-      case TypeEnum2.Number:
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value3);
-      default:
-        return String(value3);
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case Format2.TypeFormat.Boolean:
-    case Format2.TypeFormat.Number:
-    case Format2.TypeFormat.String:
-    case Format2.TypeFormat.Ref: {
-      return formatScalar(type);
-    }
-    case Format2.TypeFormat.Percent: {
-      return String(value3 * 100);
-    }
-    case Format2.TypeFormat.Currency: {
-      return String(value3);
-    }
-    case Format2.TypeFormat.DateTime: {
-      const date = new Date(value3);
-      return date.toISOString();
-    }
-    case Format2.TypeFormat.Date: {
-      const date = new Date(value3);
-      return date.toISOString().split("T")[0];
-    }
-    case Format2.TypeFormat.Time: {
-      const date = new Date(value3);
-      return date.toISOString().split("T")[1].split(".")[0];
-    }
-    case Format2.TypeFormat.GeoPoint: {
-      if (value3 === null || value3 === void 0) {
-        return "";
-      }
-      if (Array.isArray(value3) && value3.length >= 2 && value3.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation2.fromGeoPoint(value3);
-        return `${latitude},${longitude}`;
-      }
-      return String(value3);
-    }
-    default: {
-      return String(value3);
-    }
-  }
-};
-
-// src/util/omit.ts
-import * as Option from "effect/Option";
-import * as Schema from "effect/Schema";
-import * as SchemaAST from "effect/SchemaAST";
-import { Annotation, Type } from "@dxos/echo";
-var omitId = (schemaOrType) => {
-  const schema = Type.isType(schemaOrType) ? Type.getSchema(schemaOrType) : schemaOrType;
-  return omitIdFromSchema(schema);
-};
-var omitIdFromSchema = (schema) => {
-  const ast = schema.ast;
-  if (SchemaAST.isUnion(ast)) {
-    return Schema.Union(...ast.types.map((type) => omitIdFromSchema(Schema.make(type))));
-  }
-  const hasId = SchemaAST.getPropertySignatures(ast).some((prop) => prop.name === "id");
-  return hasId ? schema.pipe(Schema.omit("id")) : schema;
-};
-var omitHiddenFormFields = (schema) => {
-  const properties = SchemaAST.getPropertySignatures(schema.ast);
-  const hidden = properties.filter((prop) => Option.getOrElse(Annotation.FormInputAnnotation.getFromAst(prop.type), () => true) === false).map((prop) => prop.name);
-  return hidden.length === 0 ? schema : schema.pipe(Schema.omit(...hidden));
-};
-
-// src/util/properties.ts
-import * as Option2 from "effect/Option";
-import * as SchemaAST2 from "effect/SchemaAST";
-import { Annotation as Annotation2 } from "@dxos/echo";
-import { SchemaEx } 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 getRootFormProperties = (ast, values) => {
-  if (!SchemaEx.isDiscriminatedUnion(ast)) {
-    return getFormProperties(ast);
-  }
-  const activeType = SchemaEx.getDiscriminatedType(ast, values ?? {});
-  if (!activeType) {
-    return getFormProperties(ast);
-  }
-  const activeProps = getFormProperties(activeType);
-  const discriminators = new Set((SchemaEx.getDiscriminatingProps(ast) ?? []).map((name) => name.toString()));
-  if (discriminators.size === 0) {
-    return activeProps;
-  }
-  const fullType = SchemaEx.getDiscriminatedType(ast, {});
-  const fullDiscriminatorProps = fullType ? getFormProperties(fullType) : activeProps;
-  return activeProps.map((prop) => discriminators.has(prop.name.toString()) ? fullDiscriminatorProps.find((candidate) => candidate.name === prop.name) ?? prop : prop);
-};
-var getFormProperties = (ast) => {
-  const signatures = SchemaAST2.getPropertySignatures(ast);
-  const rawByName = new Map(signatures.map((prop) => [
-    prop.name,
-    unwrapOptional(prop)
-  ]));
-  const hidden = new Set(signatures.filter((prop) => Annotation2.FormInputAnnotation.getFromAst(unwrapOptional(prop)).pipe(Option2.getOrElse(() => true)) === false).map((prop) => prop.name));
-  return SchemaEx.getProperties(ast).filter((prop) => !hidden.has(prop.name)).map((prop) => {
-    const raw = rawByName.get(prop.name);
-    return raw && (SchemaEx.isNestedType(raw) || SchemaEx.isArrayType(raw)) ? {
-      ...prop,
-      type: raw
-    } : prop;
-  });
-};
-
-// src/util/refs.ts
-import { Ref } from "@dxos/echo";
-import { ReferenceAnnotationId } from "@dxos/echo/Annotation";
-import { SchemaEx as SchemaEx2 } from "@dxos/effect";
-var getRefProps = (ast) => {
-  if (SchemaEx2.isArrayType(ast)) {
-    const elementType = SchemaEx2.getArrayElementType(ast);
-    if (elementType) {
-      if (Ref.isRefType(elementType)) {
-        const typename = SchemaEx2.findAnnotation(elementType, ReferenceAnnotationId)?.typename;
-        return {
-          ast: elementType,
-          isArray: true,
-          typename
-        };
-      }
-    }
-  }
-  if (Ref.isRefType(ast)) {
-    const typename = SchemaEx2.findAnnotation(ast, ReferenceAnnotationId)?.typename;
-    return {
-      ast,
-      isArray: false,
-      typename
-    };
-  }
-  return void 0;
-};
-
-// src/components/Form/meta-tags.ts
-import * as Schema2 from "effect/Schema";
-import { Ref as Ref2, Tag } from "@dxos/echo";
-var META_TAGS_KEY = "_tags";
-var withMetaTags = (schema) => omitId(Schema2.Struct({
-  [META_TAGS_KEY]: Schema2.Array(Ref2.Ref(Tag.Tag)).pipe(Schema2.annotations({
-    title: "Tags"
-  }), Schema2.optional)
-}).pipe(Schema2.extend(schema)));
-
-// src/components/Form/FormControls.tsx
-import React25, { useRef as useRef7 } from "react";
-import { Column, IconButton as IconButton5, Input as Input14, ScrollArea, composable, composableProps, useMergeRefs, useTranslation as useTranslation10, withColumn } from "@dxos/react-ui";
-import { MarkdownView } from "@dxos/react-ui-markdown";
-import { mx as mx6 } from "@dxos/ui-theme";
-import { translationKey as translationKey10 } from "#translations";
-
-// src/hooks/useAsyncFieldEffect.ts
-import * as Cause from "effect/Cause";
-import * as Effect from "effect/Effect";
-import * as Exit from "effect/Exit";
-import { useEffect, useRef, useState } from "react";
-var pickValues = (values, deps) => {
-  const subset = {};
-  for (const dep of deps) {
-    subset[dep] = values?.[dep];
-  }
-  return subset;
-};
-var useAsyncFieldEffect = (factory, key, { debounceMs = 400, enabled = true } = {}) => {
-  const factoryRef = useRef(factory);
-  factoryRef.current = factory;
-  const [state, setState] = useState({
-    loading: false,
-    error: void 0,
-    data: void 0
-  });
-  useEffect(() => {
-    if (!enabled) {
-      setState({
-        loading: false,
-        error: void 0,
-        data: void 0
-      });
-      return;
-    }
-    let cancel;
-    const timer = setTimeout(() => {
-      setState((prev) => ({
-        ...prev,
-        loading: true,
-        error: void 0
-      }));
-      cancel = Effect.runCallback(factoryRef.current(), {
-        onExit: (exit) => {
-          Exit.match(exit, {
-            onSuccess: (data) => setState({
-              loading: false,
-              error: void 0,
-              data
-            }),
-            onFailure: (cause) => {
-              if (!Cause.isInterruptedOnly(cause)) {
-                setState((prev) => ({
-                  loading: false,
-                  error: Cause.squash(cause),
-                  data: prev.data
-                }));
-              }
-            }
-          });
-        }
-      });
-    }, debounceMs);
-    return () => {
-      clearTimeout(timer);
-      cancel?.();
-    };
-  }, [
-    key,
-    enabled,
-    debounceMs
-  ]);
-  return state;
-};
-
-// src/hooks/useFormContext.ts
-import { createContext } from "@radix-ui/react-context";
-import * as SchemaAST3 from "effect/SchemaAST";
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
-import { SchemaEx as SchemaEx3 } from "@dxos/effect";
-var [FormContextProvider, useFormContext] = createContext("Form");
-var useFormValues = (componentName, path, defaultValue) => {
-  const stablePath = useMemo(() => path ?? [], [
-    path ? path.join(".") : void 0
-  ]);
-  const jsonPath = SchemaEx3.createJsonPath(stablePath);
-  const { form: { values, onValueChange } } = useFormContext(componentName);
-  const value3 = SchemaEx3.getValue(values, jsonPath);
-  const lastAppliedPathRef = useRef2(null);
-  useEffect2(() => {
-    if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
-      lastAppliedPathRef.current = jsonPath;
-      onValueChange(stablePath, SchemaAST3.stringKeyword, defaultValue());
-    }
-  }, [
-    value3,
-    defaultValue,
-    onValueChange,
-    stablePath,
-    jsonPath
-  ]);
-  return value3;
-};
-var useFormFieldState = (componentName, path = []) => {
-  const stablePath = useMemo(() => path, [
-    Array.isArray(path) ? path.join(".") : path
-  ]);
-  const { form: { getStatus, getValue, onBlur, onValueChange } } = useFormContext(componentName);
-  return useMemo(() => ({
-    getStatus: () => getStatus(stablePath),
-    getValue: () => getValue(stablePath),
-    onBlur: () => onBlur(stablePath),
-    onValueChange: (ast, value3) => onValueChange(stablePath, ast, value3)
-  }), [
-    getStatus,
-    getValue,
-    onBlur,
-    onValueChange,
-    stablePath
-  ]);
-};
-
-// src/hooks/useFormHandler.ts
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useState as useState2 } from "react";
-import { SchemaEx as SchemaEx4 } from "@dxos/effect";
-import { log } from "@dxos/log";
-import { useDefaultValue } from "@dxos/react-ui";
-import { validateSchema } from "@dxos/schema";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useFormHandler.ts";
-var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: defaultValuesProp, onValuesChanged, onValidate, onSave, onCancel, ...props }) => {
-  const [changed, setChanged] = useState2({});
-  const [touched, setTouched] = useState2({});
-  const [errors, setErrors] = useState2({});
-  const [saving, setSaving] = useState2(false);
-  const defaultValues = useDefaultValue(defaultValuesProp, () => ({}));
-  const [values$, setValues] = useControllableState({
-    prop: valuesProp,
-    defaultProp: defaultValues,
-    onChange: () => {
-      if (valuesProp !== void 0) {
-        setValues(valuesProp ?? defaultValues);
-        setChanged({});
-        setTouched({});
-        setErrors({});
-        setSaving(false);
-      }
-    }
-  });
-  const values = values$;
-  const validate = useCallback((values2) => {
-    if (!schema) {
-      return false;
-    }
-    let errors2 = validateSchema(schema, values2) ?? [];
-    log("validate", {
-      values: values2,
-      errors: errors2
-    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 42, S: void 0 });
-    if (errors2.length === 0 && onValidate) {
-      const validatedValues = values2;
-      errors2 = onValidate(validatedValues) ?? [];
-    }
-    setErrors(flatMap(errors2));
-    const valid = errors2.length === 0;
-    return valid;
-  }, [
-    schema,
-    onValidate
-  ]);
-  const [schemaChanged, setSchemaChanged] = useState2(false);
-  useEffect3(() => setSchemaChanged(true), [
-    schema
-  ]);
-  useEffect3(() => {
-    if (schemaChanged) {
-      validate(values);
-      setSchemaChanged(false);
-    }
-  }, [
-    validate,
-    values,
-    schemaChanged
-  ]);
-  const isValid = useMemo2(() => {
-    return Object.keys(errors).length === 0;
-  }, [
-    errors
-  ]);
-  const canSave = useMemo2(() => !saving && // Check if any error paths that are touched have errors.
-  !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
-    touched,
-    errors,
-    saving
-  ]);
-  const handleSave = useCallback(async () => {
-    if (validate(values)) {
-      setSaving(true);
-      try {
-        await onSave?.(values, {
-          changed,
-          isValid
-        });
-      } finally {
-        setSaving(false);
-      }
-    }
-  }, [
-    values,
-    validate,
-    onSave,
-    changed,
-    isValid
-  ]);
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-  }, [
-    onCancel
-  ]);
-  const getStatus = useCallback((path) => {
-    const jsonPath = Array.isArray(path) ? SchemaEx4.createJsonPath(path) : path;
-    const [_, error] = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`)) ?? [];
-    const isTouched = touched[jsonPath];
-    if (!isTouched) {
-      return {
-        status: void 0,
-        error: void 0
-      };
-    }
-    return {
-      status: error ? "error" : void 0,
-      error: error ? error ?? void 0 : void 0
-    };
-  }, [
-    errors,
-    touched
-  ]);
-  const getValue = useCallback((path) => {
-    return SchemaEx4.getValue(values, SchemaEx4.createJsonPath(path));
-  }, [
-    values
-  ]);
-  const onValueChange = useCallback((path, type, value3) => {
-    log("onValueChange", {
-      path,
-      value: value3
-    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 138, S: void 0 });
-    const jsonPath = SchemaEx4.createJsonPath(path);
-    const pathArray = path;
-    let parsedValue = value3;
-    try {
-      if (type._tag === "NumberKeyword") {
-        parsedValue = parseFloat(value3) || 0;
-      }
-    } catch (err) {
-      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 150, S: void 0 });
-      parsedValue = void 0;
-    }
-    const newValues = mergeAtPath(values, pathArray, parsedValue);
-    const newChanged = {
-      [jsonPath]: true
-    };
-    setChanged((prev) => ({
-      ...prev,
-      ...newChanged
-    }));
-    const isValid2 = validate(newValues);
-    onValuesChanged?.(newValues, {
-      isValid: isValid2,
-      changed: newChanged
-    });
-    if (valuesProp === void 0) {
-      setValues(newValues);
-    }
-  }, [
-    values,
-    validate,
-    onValuesChanged,
-    valuesProp
-  ]);
-  const onBlur = useCallback(async (path) => {
-    const jsonPath = SchemaEx4.createJsonPath(path);
-    setTouched((touched2) => ({
-      ...touched2,
-      [jsonPath]: true
-    }));
-    const isValid2 = validate(values);
-    if (Object.keys(changed).length > 0 && isValid2 && autoSave) {
-      await onSave?.(values, {
-        changed,
-        isValid: isValid2
-      });
-    }
-  }, [
-    validate,
-    values,
-    changed,
-    autoSave,
-    onSave
-  ]);
-  return useMemo2(() => ({
-    // State.
-    schema,
-    values,
-    errors,
-    touched,
-    changed,
-    isValid,
-    canSave,
-    autoSave,
-    // Actions.
-    onSave: handleSave,
-    onCancel: handleCancel,
-    // Field utils.
-    getStatus,
-    getValue,
-    onBlur,
-    onValueChange,
-    ...props
-  }), [
-    schema,
-    autoSave,
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    isValid,
-    getStatus,
-    getValue,
-    onBlur,
-    onValueChange,
-    handleSave,
-    handleCancel
-  ]);
-};
-var mergeAtPath = (obj, path, value3) => {
-  if (path.length === 0) {
-    return value3;
-  }
-  const [head, ...rest] = path;
-  const child = rest.length === 0 ? value3 : mergeAtPath(obj?.[head], rest, value3);
-  if (Array.isArray(obj)) {
-    const copy = [
-      ...obj
-    ];
-    copy[head] = child;
-    return copy;
-  }
-  return {
-    ...obj,
-    [head]: child
-  };
-};
-var flatMap = (errors) => {
-  return errors.reduce((result, { path, message }) => {
-    const jsonPath = SchemaEx4.fromEffectValidationPath(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
-    }
-    return result;
-  }, {});
-};
-
-// src/hooks/useKeyHandler.tsx
-import { useCallback as useCallback2, useLayoutEffect } from "react";
-import { addEventListener } from "@dxos/async";
-var useKeyHandler = (elRef, form) => {
-  const handleKeyDown = useCallback2((event) => {
-    switch (event.key) {
-      case "Enter": {
-        if (event.metaKey && form.canSave) {
-          form.onSave();
-        }
-        break;
-      }
-    }
-  }, [
-    form.isValid,
-    form.canSave,
-    form.onSave,
-    form.autoSave
-  ]);
-  useLayoutEffect(() => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-    return addEventListener(el, "keydown", handleKeyDown);
-  }, [
-    elRef,
-    handleKeyDown
-  ]);
-};
-
-// src/components/Form/Form.theme.ts
-import { mx, tv } from "@dxos/ui-theme";
-var formStyles = tv({
-  slots: {
-    viewport: "",
-    content: "",
-    section: "flex flex-col py-form-section-gap first:pt-0",
-    group: "flex flex-col gap-3 p-trim-md border border-separator rounded-sm",
-    sectionHeader: "",
-    sectionTitle: "text-lg",
-    sectionDescription: "text-description",
-    fieldSet: "",
-    field: "",
-    fieldLabel: "h-8 grid grid-cols-[1fr_auto_auto] items-center select-none",
-    fieldLabelText: "",
-    fieldDescription: "text-description",
-    fieldControl: "",
-    fieldValidation: "",
-    // Action bar (cancel/save), equal-width columns flowing horizontally.
-    actions: "grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding",
-    // Standalone submit row (full-width primary button).
-    submit: "flex w-full pt-form-padding",
-    // Collapsible field-set body: indented column of sub-fields.
-    fieldSetBody: "flex flex-col gap-2 px-2 pb-2",
-    // Bordered container wrapping a collapsible nested group, plus its top spacing.
-    fieldSetBox: "border border-subdued-separator rounded-sm",
-    fieldSetBoxOuter: "pt-trim-md"
-  },
-  variants: {
-    variant: {
-      default: {},
-      settings: {
-        content: "dx-document",
-        // Gap on the section spaces its direct children — section title/description and, for action
-        // panels, the `Form.Row`s placed directly in the section (which have no `fieldSet` wrapper).
-        section: "py-form-section-gap! gap-trim-md",
-        sectionHeader: "pb-form-section-gap",
-        sectionTitle: "px-trim-md text-xl",
-        sectionDescription: "px-trim-md",
-        // No top padding: the section gap already separates the field set from the title above it.
-        fieldSet: "flex flex-col gap-trim-md",
-        field: mx("grid", 'grid-cols-1 [grid-template-areas:"header""description""control""validation"]', 'md:grid-cols-2 md:[grid-template-areas:"header_header""description_control""validation_validation"]', "gap-x-trim-lg gap-y-0 p-trim-md border border-input-separator rounded-md"),
-        fieldLabel: "[grid-area:header]",
-        fieldLabelText: "text-base-fg text-lg",
-        fieldDescription: "[grid-area:description] pt-1 text-description",
-        fieldControl: "[grid-area:control] flex justify-end items-start md:text-right pt-3 md:pt-0",
-        fieldValidation: "[grid-area:validation]"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-var formTheme = {
-  styles: formStyles,
-  behavior: {
-    default: {
-      showDescription: false
-    },
-    settings: {
-      showDescription: true
-    }
-  }
-};
-var formSlots = Object.keys(formTheme.styles());
-
-// src/components/Form/FormFieldSet/FormFieldSet.tsx
-import * as Option7 from "effect/Option";
-import React24, { useMemo as useMemo12 } from "react";
-import { DEFAULT_LAYOUT_NAME, FormLayoutAnnotation } from "@dxos/echo/Annotation";
-import { SchemaEx as SchemaEx10 } from "@dxos/effect";
-
-// src/components/Form/FormField/fields/ArrayField/ArrayField.tsx
-import * as Option4 from "effect/Option";
-import * as SchemaAST5 from "effect/SchemaAST";
-import React4, { useCallback as useCallback3, useRef as useRef3 } from "react";
-import { Annotation as Annotation4, Ref as Ref3 } from "@dxos/echo";
-import { useType as defaultUseType } from "@dxos/echo-react";
-import { SchemaEx as SchemaEx6 } from "@dxos/effect";
-import { DXN } from "@dxos/keys";
-import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { OrderedList } from "@dxos/react-ui-list";
-import { mx as mx3 } from "@dxos/ui-theme";
-import { arrayMove } from "@dxos/util";
-import { translationKey as translationKey2 } from "#translations";
-
-// src/components/Form/FormField/FormField.tsx
-import * as Match from "effect/Match";
-import * as Option3 from "effect/Option";
-import * as Schema3 from "effect/Schema";
-import * as SchemaAST4 from "effect/SchemaAST";
-import * as String2 from "effect/String";
-import React, { useMemo as useMemo3 } from "react";
-import { Annotation as Annotation3, Format as Format3 } from "@dxos/echo";
-import { SchemaEx as SchemaEx5 } from "@dxos/effect";
-import { IconButton, useTranslation } from "@dxos/react-ui";
-import { translationKey } from "#translations";
-var FormField = (props) => {
-  const {
-    type,
-    name,
-    label: labelProp,
-    path,
-    required,
-    projection,
-    fieldMap,
-    fieldProvider,
-    readonly,
-    layout,
-    // RefFieldProps
-    createTypename,
-    createOptionLabel,
-    createOptionIcon,
-    createInitialValuePath,
-    createFieldMap: createFieldMap3,
-    db,
-    useType: useType2,
-    getOptions,
-    onCreate,
-    resolveCreateEntry,
-    refInline
-  } = props;
-  const { t } = useTranslation(translationKey);
-  const title = SchemaEx5.getAnnotation(SchemaAST4.TitleAnnotationId)(type);
-  const description = SchemaEx5.getAnnotation(SchemaAST4.DescriptionAnnotationId)(type);
-  const examples = SchemaEx5.getAnnotation(SchemaAST4.ExamplesAnnotationId)(type);
-  const label = useMemo3(() => labelProp ?? title ?? (name == null ? "" : String2.capitalize(name)), [
-    labelProp,
-    title,
-    name
-  ]);
-  const placeholder = useMemo3(() => examples?.length ? `${t("example.placeholder")}: ${examples[0]}` : description ?? label, [
-    examples,
-    description,
-    label,
-    t
-  ]);
-  const providerSchema = useMemo3(() => fieldProvider ? Schema3.make(type) : void 0, [
-    fieldProvider,
-    type
-  ]);
-  const fieldState = useFormFieldState(FormField.displayName, path);
-  const jsonPath = SchemaEx5.createJsonPath(path ?? []);
-  const fieldProps = {
-    type,
-    format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option3.getOrUndefined(annotation)),
-    readonly,
-    label,
-    description,
-    jsonPath,
-    placeholder,
-    presentation: layout,
-    required,
-    db,
-    ...fieldState
-  };
-  if (readonly && fieldState.getValue() == null) {
-    return null;
-  }
-  const CustomField = fieldMap?.[jsonPath];
-  if (CustomField) {
-    return /* @__PURE__ */ React.createElement(CustomField, fieldProps);
-  }
-  if (fieldProvider && providerSchema) {
-    const component = fieldProvider({
-      schema: providerSchema,
-      prop: name ?? "",
-      fieldProps
-    });
-    if (component) {
-      return component;
-    }
-  }
-  const optionsLookup2 = Option3.getOrUndefined(OptionsLookupAnnotation.getFromAst(type));
-  if (optionsLookup2) {
-    return optionsLookup2.combobox ? /* @__PURE__ */ React.createElement(ComboboxField, {
-      ...fieldProps,
-      lookup: optionsLookup2
-    }) : /* @__PURE__ */ React.createElement(AsyncSelectField, {
-      ...fieldProps,
-      lookup: optionsLookup2
-    });
-  }
-  const autofill2 = Option3.getOrUndefined(AutofillAnnotation.getFromAst(type));
-  if (autofill2) {
-    return /* @__PURE__ */ React.createElement(AutofillField, {
-      ...fieldProps,
-      autofill: autofill2
-    });
-  }
-  if (SchemaEx5.isArrayType(type)) {
-    return /* @__PURE__ */ React.createElement(ArrayField, {
-      fieldProps: fieldState,
-      label,
-      ...props
-    });
-  }
-  const Field = getFormField(fieldProps);
-  if (Field) {
-    return /* @__PURE__ */ React.createElement(Field, fieldProps);
-  }
-  const options = getSelectOptions(type);
-  if (options) {
-    const fieldProjections = projection?.getFieldProjections();
-    const fieldProjection = fieldProjections?.find((fp) => fp.field.path === name);
-    const selectOptions = fieldProjection?.props.options;
-    return /* @__PURE__ */ React.createElement(SelectField, {
-      ...fieldProps,
-      options: options.map((option) => {
-        const selectOption = selectOptions?.find((so) => so.id === globalThis.String(option));
-        return {
-          value: option,
-          label: selectOption?.title ?? option.toString()
-        };
-      })
-    });
-  }
-  const refProps = getRefProps(type);
-  if (refProps) {
-    const inline = refInline || Annotation3.FormInlineAnnotation.getFromAst(refProps.ast).pipe(Option3.getOrElse(() => false));
-    if (inline && !refProps.isArray) {
-      return /* @__PURE__ */ React.createElement(InlineRefField, {
-        ...fieldProps,
-        ...refProps,
-        db,
-        useType: useType2,
-        onCreate,
-        resolveCreateEntry
-      });
-    }
-    const isCreateTarget = !createTypename || refProps.typename === createTypename;
-    return /* @__PURE__ */ React.createElement(RefField, {
-      ...fieldProps,
-      ...refProps,
-      createOptionLabel: isCreateTarget ? createOptionLabel : void 0,
-      createOptionIcon: isCreateTarget ? createOptionIcon : void 0,
-      createInitialValuePath: isCreateTarget ? createInitialValuePath : void 0,
-      createFieldMap: isCreateTarget ? createFieldMap3 : void 0,
-      db,
-      useType: useType2,
-      getOptions,
-      onCreate,
-      resolveCreateEntry
-    });
-  }
-  if (SchemaEx5.isNestedType(type)) {
-    const baseNode = SchemaEx5.findNode(type, SchemaEx5.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? SchemaEx5.getDiscriminatedType(baseNode, fieldState.getValue()) : SchemaEx5.findNode(type, SchemaAST4.isTypeLiteral);
-    if (typeLiteral) {
-      const schema = Schema3.make(typeLiteral);
-      return /* @__PURE__ */ React.createElement(FormFieldSet, {
-        schema,
-        path,
-        readonly,
-        layout,
-        label,
-        collapsible: true,
-        projection,
-        fieldMap,
-        fieldProvider,
-        createOptionLabel,
-        createOptionIcon,
-        createInitialValuePath,
-        db,
-        useType: useType2,
-        getOptions,
-        onCreate,
-        resolveCreateEntry
-      });
-    }
-  }
-  return null;
-};
-FormField.displayName = "Form.FormField";
-var CompactIconButton = (props) => {
-  return /* @__PURE__ */ React.createElement(IconButton, {
-    variant: "ghost",
-    iconOnly: true,
-    ...props
-  });
-};
-var getFormField = ({ type, format }) => {
-  if (SchemaAST4.isRefinement(type)) {
-    return getFormField({
-      type: type.from,
-      format
-    });
-  }
-  const formatField = Match.value(format).pipe(Match.withReturnType(), Match.when(Format3.TypeFormat.Date, () => DateField), Match.when(Format3.TypeFormat.DateTime, () => DateField), Match.when(Format3.TypeFormat.GeoPoint, () => GeoPointField), Match.when(Format3.TypeFormat.Markdown, () => MarkdownField), Match.when(Format3.TypeFormat.Password, () => PasswordField), Match.when(Format3.TypeFormat.Text, () => TextAreaField), Match.when(Format3.TypeFormat.Time, () => DateField), Match.orElse(() => void 0));
-  if (formatField) {
-    return formatField;
-  }
-  switch (type._tag) {
-    // TODO(wittjosiah): Schema.Any is currently used to represent template inputs.
-    case "AnyKeyword":
-    case "StringKeyword":
-      return TextField;
-    case "NumberKeyword":
-      return NumberField;
-    case "BooleanKeyword":
-      return BooleanField;
-  }
-  return void 0;
-};
-var getSelectOptions = (ast) => {
-  if (SchemaEx5.isLiteralUnion(ast)) {
-    return ast.types.map((type) => type.literal).filter((v) => v !== null);
-  }
-  return Format3.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option3.getOrUndefined(annotation));
-};
-
-// src/components/Form/FormField/FormFieldHeader.tsx
-import React3 from "react";
-
-// src/components/Form/FormField/FormRow.tsx
-import { format as formatDate2 } from "date-fns";
-import React2, { Component } from "react";
-import { Format as Format4 } from "@dxos/echo";
-import { Icon, Input, Tooltip } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/ui-theme";
-
-// src/components/Form/FormField/presentation.tsx
-var presentationFor = (layout) => ({
-  layout,
-  isStatic: layout === "static",
-  showLabel: layout !== "inline",
-  showError: layout === "full"
-});
-
-// src/components/Form/FormField/FormRow.tsx
-var FormFieldLabel = ({ classNames, labelClassName, variant = "default", label, error, readonly, required, standalone, button, onClick }) => {
-  const styles3 = formTheme.styles({
-    variant
-  });
-  const labelClassNames = mx2("text-sm text-description", required && "after:content-['*'] after:ms-0.5 after:text-warning-text", styles3.fieldLabelText({
-    class: labelClassName
-  }));
-  const labelNode = readonly || standalone ? /* @__PURE__ */ React2.createElement("span", {
-    className: labelClassNames
-  }, label) : /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: labelClassNames
-  }, label);
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: styles3.fieldLabel({
-      class: mx2(onClick && "cursor-pointer", classNames)
-    }),
-    onClick
-  }, labelNode, error ? /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: error,
-    side: "bottom"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--warning--regular",
-    size: 4,
-    classNames: "text-error-text"
-  })) : /* @__PURE__ */ React2.createElement("span", null), button);
-};
-FormFieldLabel.displayName = "Form.FieldLabel";
-var formatStaticValue = (value3, format) => {
-  if (value3 == null) {
-    return "";
-  }
-  switch (format) {
-    case Format4.TypeFormat.DateTime:
-    case Format4.TypeFormat.Date:
-    case Format4.TypeFormat.Time: {
-      const date = new Date(value3);
-      if (Number.isNaN(date.getTime())) {
-        return String(value3);
-      }
-      const pattern = format === Format4.TypeFormat.DateTime ? "PPp" : format === Format4.TypeFormat.Date ? "PP" : "p";
-      return formatDate2(date, pattern);
-    }
-    default:
-      return String(value3);
-  }
-};
-var FORM_ROW_NAME = "Form.Row";
-var FormRow = ({ classNames, children, readonly, presentation, label, description, jsonPath, format, required, standalone, renderStatic, validation, getStatus, getValue, rootRef }) => {
-  const { variant = "default" } = useFormContext(FORM_ROW_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  const { showDescription } = formTheme.behavior[variant];
-  const resolved = presentationFor(presentation);
-  if (typeof children === "function" && getStatus && getValue) {
-    const { status, error } = getStatus();
-    const value3 = getValue();
-    if (resolved.isStatic && value3 == null) {
-      return null;
-    }
-    const control = resolved.isStatic ? renderStatic?.(value3) ?? /* @__PURE__ */ React2.createElement("p", {
-      className: "truncate min-w-0"
-    }, formatStaticValue(value3, format)) : children({
-      value: value3,
-      presentation: resolved
-    });
-    return /* @__PURE__ */ React2.createElement(Input.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: styles3.field({
-        class: classNames
-      }),
-      ref: rootRef
-    }, resolved.showLabel && /* @__PURE__ */ React2.createElement(FormFieldLabel, {
-      variant,
-      error,
-      readonly,
-      required,
-      standalone,
-      label,
-      path: jsonPath
-    }), showDescription && description && /* @__PURE__ */ React2.createElement(Input.Description, {
-      classNames: styles3.fieldDescription()
-    }, description), /* @__PURE__ */ React2.createElement("div", {
-      className: styles3.fieldControl()
-    }, control), resolved.showError && error && /* @__PURE__ */ React2.createElement("div", {
-      className: styles3.fieldValidation()
-    }, /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, error)))));
-  }
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: rootRef,
-    className: styles3.field({
-      class: classNames
-    })
-  }, resolved.showLabel && label && /* @__PURE__ */ React2.createElement(FormFieldLabel, {
-    variant,
-    readonly,
-    required,
-    standalone: true,
-    label,
-    path: jsonPath
-  }), showDescription && description && /* @__PURE__ */ React2.createElement("p", {
-    className: styles3.fieldDescription()
-  }, description), /* @__PURE__ */ React2.createElement("div", {
-    className: styles3.fieldControl()
-  }, typeof children === "function" ? null : children), validation && /* @__PURE__ */ React2.createElement("div", {
-    className: styles3.fieldValidation()
-  }, validation));
-};
-FormRow.displayName = FORM_ROW_NAME;
-var FormFieldErrorBoundary = class extends Component {
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  state = {
-    error: void 0
-  };
-  componentDidUpdate(prevProps) {
-    if (prevProps.path !== this.props.path) {
-      this.resetError();
-    }
-  }
-  render() {
-    if (this.state.error) {
-      return /* @__PURE__ */ React2.createElement("div", {
-        className: "flex gap-2 border border-error-border font-mono text-sm"
-      }, /* @__PURE__ */ React2.createElement("span", {
-        className: "bg-error-bg text-base-fg px-1 font-thin"
-      }, "ERROR"), String(this.props.path?.join(".")));
-    }
-    return this.props.children;
-  }
-  resetError() {
-    this.setState({
-      error: void 0
-    });
-  }
-};
-
-// src/components/Form/FormField/FormFieldHeader.tsx
-var FormFieldHeader = ({ label, path, required, readonly, classNames, add, actions, onClick }) => /* @__PURE__ */ React3.createElement(FormFieldLabel, {
-  standalone: true,
-  classNames,
-  label,
-  required,
-  readonly,
-  path,
-  button: !readonly && add || actions ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, !readonly && add && /* @__PURE__ */ React3.createElement(CompactIconButton, {
-    disabled: add.disabled,
-    icon: add.icon ?? "ph--plus--regular",
-    label: add.label,
-    onClick: (event) => {
-      event.stopPropagation();
-      add.onClick();
-    }
-  }), actions) : void 0,
-  onClick
-});
-
-// src/components/Form/FormField/fields/ArrayField/ArrayField.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/FormField/fields/ArrayField/ArrayField.tsx";
-var DND_ID = "__dndId";
-var isOrderedItem = (item) => !!item && typeof item === "object" && typeof item[DND_ID] === "string";
-var getOrderedId = (item) => item[DND_ID];
-var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
-  const { t } = useTranslation2(translationKey2);
-  const elementType = SchemaEx6.getArrayElementType(type);
-  const { onValueChange } = inputProps;
-  const values = useFormValues(ArrayField.displayName, path, () => []);
-  const ordered = Annotation4.FormOrderedAnnotation.getFromAst(type).pipe(Option4.getOrElse(() => false));
-  const { db, onCreate, getCreateDefaults, useType: useType2 = defaultUseType } = props;
-  const createTypename = Annotation4.FormCreateAnnotation.getFromAst(type).pipe(Option4.getOrUndefined);
-  const createSchema = useType2(db, createTypename ? DXN.make(createTypename) : void 0);
-  const createInline = !!createTypename && !!elementType && Ref3.isRefType(elementType) && !readonly && layout !== "static";
-  const idsRef = useRef3([]);
-  const counterRef = useRef3(0);
-  const nextId = useCallback3(() => `${DND_ID}-${counterRef.current++}`, []);
-  const handleAddCreate = useCallback3(async () => {
-    if (!createSchema || !onCreate) {
-      return;
-    }
-    const defaults = getCreateDefaults?.({
-      jsonPath: SchemaEx6.createJsonPath(path ?? []),
-      schema: createSchema
-    }) ?? {};
-    const created = await onCreate(createSchema, defaults);
-    if (!created) {
-      return;
-    }
-    idsRef.current.push(nextId());
-    onValueChange(type, [
-      ...values ?? [],
-      Ref3.make(created)
-    ]);
-  }, [
-    createSchema,
-    onCreate,
-    getCreateDefaults,
-    onValueChange,
-    type,
-    path,
-    values,
-    nextId
-  ]);
-  const getDefaultObjectValue = (typeNode) => {
-    const baseNode = SchemaEx6.findNode(typeNode, SchemaEx6.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? SchemaEx6.getDiscriminatedType(baseNode, {}) : SchemaEx6.findNode(typeNode, SchemaAST5.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-    return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-      const defaultValue = SchemaAST5.getDefaultAnnotation(prop.type).pipe((annotation) => Option4.getOrUndefined(annotation));
-      return [
-        prop.name,
-        defaultValue
-      ];
-    }));
-  };
-  const handleAdd = useCallback3(() => {
-    let defaultValue;
-    try {
-      defaultValue = elementType && SchemaEx6.isNestedType(elementType) ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    } catch (err) {
-      log2.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 97, S: void 0 });
-      return;
-    }
-    idsRef.current.push(nextId());
-    onValueChange(type, [
-      ...values ?? [],
-      defaultValue
-    ]);
-  }, [
-    onValueChange,
-    type,
-    elementType,
-    values,
-    nextId
-  ]);
-  const handleDelete = useCallback3((idx) => {
-    idsRef.current.splice(idx, 1);
-    onValueChange(type, values?.filter((_, i) => i !== idx));
-  }, [
-    onValueChange,
-    type,
-    values
-  ]);
-  const handleMove = useCallback3((fromIndex, toIndex) => {
-    const next = [
-      ...values ?? []
-    ];
-    arrayMove(next, fromIndex, toIndex);
-    arrayMove(idsRef.current, fromIndex, toIndex);
-    onValueChange(type, next);
-  }, [
-    onValueChange,
-    type,
-    values
-  ]);
-  if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
-    return null;
-  }
-  const renderItemAsObject = elementType && SchemaEx6.isNestedType(elementType) && !Ref3.isRefType(elementType);
-  const renderField = (index, isLast) => {
-    const field = /* @__PURE__ */ React4.createElement(FormField, {
-      ...props,
-      autoFocus: isLast,
-      type: elementType,
-      ...renderItemAsObject || createInline ? {
-        name: null
-      } : {
-        label
-      },
-      path: [
-        ...path ?? [],
-        index
-      ],
-      readonly: readonly || layout === "static",
-      layout: renderItemAsObject ? layout === "static" ? "static" : void 0 : "inline",
-      refInline: createInline || void 0
-    });
-    return createInline ? /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "w-full min-w-0 [--dx-col:auto]"
-    }, field) : field;
-  };
-  const header = (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React4.createElement(FormFieldHeader, {
-    label,
-    path: SchemaEx6.createJsonPath(path ?? []),
-    readonly,
-    add: layout !== "static" ? {
-      label: t("add-item.button"),
-      onClick: createInline ? () => void handleAddCreate() : handleAdd
-    } : void 0
-  });
-  if (ordered && !readonly && layout !== "static") {
-    const ids = idsRef.current;
-    const count = values?.length ?? 0;
-    while (ids.length < count) {
-      ids.push(nextId());
-    }
-    if (ids.length > count) {
-      ids.length = count;
-    }
-    const items = (values ?? []).map((value3, index) => ({
-      value: value3,
-      index,
-      [DND_ID]: ids[index]
-    }));
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, header, /* @__PURE__ */ React4.createElement(OrderedList.Root, {
-      items,
-      isItem: isOrderedItem,
-      getId: getOrderedId,
-      onMove: handleMove
-    }, ({ items: items2 }) => /* @__PURE__ */ React4.createElement(OrderedList.Content, null, items2.map((item) => /* @__PURE__ */ React4.createElement(OrderedList.Item, {
-      key: getOrderedId(item),
-      id: getOrderedId(item),
-      item,
-      classNames: "grid grid-cols-[min-content_1fr_min-content] items-start gap-1 p-0 pb-1"
-    }, /* @__PURE__ */ React4.createElement(OrderedList.DragHandle, null), renderField(item.index, item.index === items2.length - 1), /* @__PURE__ */ React4.createElement(CompactIconButton, {
-      icon: "ph--x--regular",
-      label: t("remove-item.button"),
-      onClick: () => handleDelete(item.index)
-    }))))));
-  }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, header, /* @__PURE__ */ React4.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, values?.map((_, index) => {
-    const isLast = index === values.length - 1;
-    return /* @__PURE__ */ React4.createElement("div", {
-      key: index,
-      className: mx3("grid grid-cols-[minmax(0,1fr)_min-content] gap-1", renderItemAsObject || createInline ? "items-start" : "items-center")
-    }, renderField(index, isLast), !readonly && layout !== "static" && /* @__PURE__ */ React4.createElement(CompactIconButton, {
-      icon: "ph--x--regular",
-      label: t("remove-item.button"),
-      onClick: () => handleDelete(index)
-    }));
-  })));
-};
-ArrayField.displayName = "Form.ArrayField";
-var getDefaultValue = (ast) => {
-  switch (ast?._tag) {
-    case "StringKeyword": {
-      return "";
-    }
-    case "NumberKeyword": {
-      return 0;
-    }
-    case "BooleanKeyword": {
-      return false;
-    }
-    case "Suspend": {
-      return getDefaultValue(ast.f());
-    }
-    case "Refinement": {
-      const jsonSchema = Option4.getOrUndefined(SchemaAST5.getJSONSchemaAnnotation(ast));
-      if (jsonSchema != null && "minimum" in jsonSchema && typeof jsonSchema.minimum === "number") {
-        return jsonSchema.minimum;
-      }
-      return getDefaultValue(ast.from);
-    }
-    default: {
-      if (ast && SchemaEx6.isNestedType(ast)) {
-        return {};
-      } else {
-        throw new Error(`Unsupported type: ${ast?._tag}`);
-      }
-    }
-  }
-};
-
-// src/components/Form/FormField/fields/AsyncSelectField/AsyncSelectField.tsx
-import React6, { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4 } from "react";
-
-// src/components/Form/FormField/fields/SelectField/SelectField.tsx
-import React5, { useCallback as useCallback4 } from "react";
-import { invariant } from "@dxos/invariant";
-import { Icon as Icon2, Select } from "@dxos/react-ui";
-import { getStyles } from "@dxos/ui-theme";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/FormField/fields/SelectField/SelectField.tsx";
-var SelectField = ({ type, readonly, placeholder, options, onValueChange, ...props }) => {
-  const handleValueChange = useCallback4((value3) => onValueChange(type, value3), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React5.createElement(FormRow, {
-    readonly,
-    renderStatic: (value3) => /* @__PURE__ */ React5.createElement("p", {
-      className: "truncate min-w-0"
-    }, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)),
-    ...props
-  }, ({ value: value3 }) => /* @__PURE__ */ React5.createElement(Select.Root, {
-    value: value3,
-    onValueChange: handleValueChange
-  }, /* @__PURE__ */ React5.createElement(Select.TriggerButton, {
-    classNames: "w-full",
-    disabled: !!readonly,
-    placeholder
-  }), options?.length !== 0 && /* @__PURE__ */ React5.createElement(Select.Portal, null, /* @__PURE__ */ React5.createElement(Select.Content, null, /* @__PURE__ */ React5.createElement(Select.Viewport, null, options?.map(({ value: value4, label, secondaryLabel, icon, iconHue }) => (
-    // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React5.createElement(Select.Option, {
-      key: String(value4),
-      value: String(value4)
-    }, /* @__PURE__ */ React5.createElement("span", {
-      className: "flex items-center flex-row gap-2"
-    }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
-      icon,
-      classNames: getIconHueStyles(iconHue)
-    }), label ?? String(value4), secondaryLabel && /* @__PURE__ */ React5.createElement("span", {
-      className: "text-subdued text-xs"
-    }, secondaryLabel)))
-  ))), /* @__PURE__ */ React5.createElement(Select.Arrow, null)))));
-};
-var getIconHueStyles = (iconHue) => {
-  const styles3 = iconHue ? getStyles(iconHue) : void 0;
-  return styles3?.fg;
-};
-var createSelectField = ({ options, defaultLabel = "Default" }) => {
-  const normalized = options.map((option) => typeof option === "string" ? {
-    value: option,
-    label: option
-  } : option);
-  const hasDefault = defaultLabel !== null;
-  const sentinel = "__default__";
-  invariant(!normalized.some((option) => option.value === sentinel), `createSelectField: option value '${sentinel}' is reserved.`, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 57, S: void 0, A: ["!normalized.some((option)=>option.value === sentinel)", "`createSelectField: option value '${sentinel}' is reserved.`"] });
-  return ({ type, readonly, onValueChange, ...props }) => /* @__PURE__ */ React5.createElement(FormRow, {
-    readonly,
-    renderStatic: (value3) => /* @__PURE__ */ React5.createElement("p", {
-      className: "truncate min-w-0"
-    }, normalized.find((option) => option.value === value3)?.label ?? String(value3 ?? "")),
-    ...props
-  }, ({ value: value3 }) => /* @__PURE__ */ React5.createElement(Select.Root, {
-    disabled: !!readonly,
-    value: value3 ?? sentinel,
-    onValueChange: (next) => onValueChange(type, hasDefault && next === sentinel ? void 0 : next)
-  }, /* @__PURE__ */ React5.createElement(Select.TriggerButton, {
-    classNames: "w-full",
-    disabled: !!readonly
-  }), normalized.length > 0 && /* @__PURE__ */ React5.createElement(Select.Portal, null, /* @__PURE__ */ React5.createElement(Select.Content, null, /* @__PURE__ */ React5.createElement(Select.Viewport, null, hasDefault && /* @__PURE__ */ React5.createElement(Select.Option, {
-    value: sentinel
-  }, defaultLabel), normalized.map((option) => /* @__PURE__ */ React5.createElement(Select.Option, {
-    key: option.value,
-    value: option.value
-  }, option.label ?? option.value))), /* @__PURE__ */ React5.createElement(Select.Arrow, null)))));
-};
-
-// src/components/Form/FormField/fields/AsyncSelectField/AsyncSelectField.tsx
-var AsyncSelectField = ({ lookup, ...fieldProps }) => {
-  const values = useFormValues(AsyncSelectField.displayName);
-  const subset = useMemo4(() => pickValues(values, lookup.deps), [
-    values,
-    lookup.deps
-  ]);
-  const key = useMemo4(() => JSON.stringify(subset), [
-    subset
-  ]);
-  const { loading, data } = useAsyncFieldEffect(() => lookup.load(subset), key);
-  const options = data ?? [];
-  const { type, placeholder } = fieldProps;
-  const current = fieldProps.getValue();
-  const onValueChangeRef = useRef4(fieldProps.onValueChange);
-  onValueChangeRef.current = fieldProps.onValueChange;
-  const autoSelectedDataRef = useRef4(void 0);
-  useEffect4(() => {
-    if ((current == null || current === "") && data?.length === 1 && data !== autoSelectedDataRef.current) {
-      autoSelectedDataRef.current = data;
-      onValueChangeRef.current(type, data[0].value);
-    }
-  }, [
-    current,
-    data,
-    type
-  ]);
-  const resolvedPlaceholder = loading ? "Loading\u2026" : options.length === 0 ? "No options available" : placeholder;
-  return /* @__PURE__ */ React6.createElement(SelectField, {
-    ...fieldProps,
-    placeholder: resolvedPlaceholder,
-    options: options.map(({ value: value3, label, secondaryLabel, icon }) => ({
-      value: value3,
-      label,
-      secondaryLabel,
-      icon
-    }))
-  });
-};
-AsyncSelectField.displayName = "Form.AsyncSelectField";
-
-// src/components/Form/FormField/fields/AutofillField/AutofillField.tsx
-import React8, { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
-
-// src/components/Form/FormField/fields/TextField/TextField.tsx
-import React7, { useCallback as useCallback5 } from "react";
-import { Input as Input2 } from "@dxos/react-ui";
-var TextField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
-  const handleChange = useCallback5((event) => onValueChange(type, event.target.value), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React7.createElement(FormRow, {
-    readonly,
-    ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React7.createElement(Input2.TextInput, {
-    noAutoFill: true,
-    disabled: !!readonly,
-    placeholder,
-    value: value3,
-    onBlur,
-    onChange: handleChange
-  }));
-};
-
-// src/components/Form/FormField/fields/AutofillField/AutofillField.tsx
-var AutofillField = ({ autofill: autofill2, ...fieldProps }) => {
-  const values = useFormValues(AutofillField.displayName);
-  const subset = useMemo5(() => pickValues(values, autofill2.deps), [
-    values,
-    autofill2.deps
-  ]);
-  const key = useMemo5(() => JSON.stringify(subset), [
-    subset
-  ]);
-  const { data } = useAsyncFieldEffect(() => autofill2.derive(subset), key);
-  const { type } = fieldProps;
-  const getValueRef = useRef5(fieldProps.getValue);
-  getValueRef.current = fieldProps.getValue;
-  const onValueChangeRef = useRef5(fieldProps.onValueChange);
-  onValueChangeRef.current = fieldProps.onValueChange;
-  const lastFilledRef = useRef5(void 0);
-  useEffect5(() => {
-    const current = getValueRef.current();
-    if (typeof data !== "string" || data.length === 0) {
-      if (lastFilledRef.current != null && current === lastFilledRef.current) {
-        lastFilledRef.current = void 0;
-        onValueChangeRef.current(type, "");
-      }
-      return;
-    }
-    if (current === data) {
-      lastFilledRef.current = data;
-      return;
-    }
-    if (current == null || current === "" || current === lastFilledRef.current) {
-      lastFilledRef.current = data;
-      onValueChangeRef.current(type, data);
-    }
-  }, [
-    data,
-    type
-  ]);
-  return /* @__PURE__ */ React8.createElement(TextField, fieldProps);
-};
-AutofillField.displayName = "Form.AutofillField";
-
-// src/components/Form/FormField/fields/BooleanField/BooleanField.tsx
-import React9, { useCallback as useCallback6 } from "react";
-import { Input as Input3 } from "@dxos/react-ui";
-var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
-  const handleChange = useCallback6((value3) => onValueChange?.(type, value3), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React9.createElement(FormRow, {
-    readonly,
-    ...props
-  }, ({ value: value3 }) => /* @__PURE__ */ React9.createElement(Input3.Block, null, /* @__PURE__ */ React9.createElement(Input3.Switch, {
-    disabled: !!readonly,
-    checked: value3,
-    onCheckedChange: handleChange
-  })));
-};
-
-// src/components/Form/FormField/fields/ComboboxField/ComboboxField.tsx
-import React10, { useCallback as useCallback7, useMemo as useMemo6, useState as useState3 } from "react";
-import { Combobox } from "@dxos/react-ui-list";
-var ComboboxField = ({ lookup, type, readonly, placeholder, onValueChange, ...props }) => {
-  const values = useFormValues(ComboboxField.displayName);
-  const ownKey = props.jsonPath;
-  const [query, setQuery] = useState3("");
-  const lookupValues = useMemo6(() => {
-    const subset = pickValues(values, lookup.deps);
-    if (ownKey && lookup.deps.includes(ownKey)) {
-      subset[ownKey] = query;
-    }
-    return subset;
-  }, [
-    values,
-    lookup.deps,
-    ownKey,
-    query
-  ]);
-  const key = useMemo6(() => JSON.stringify(lookupValues), [
-    lookupValues
-  ]);
-  const { data } = useAsyncFieldEffect(() => lookup.load(lookupValues), key);
-  const trimmed = query.trim();
-  const normalized = trimmed.toLowerCase();
-  const results = useMemo6(() => normalized.length === 0 ? [] : (data ?? []).filter((option) => (option.label ?? option.value).toLowerCase().includes(normalized)), [
-    data,
-    normalized
-  ]);
-  const hasExact = results.some((option) => option.value === trimmed);
-  const handleValueChange = useCallback7((next) => onValueChange(type, next), [
-    onValueChange,
-    type
-  ]);
-  const handleOpenChange = useCallback7((open) => {
-    if (!open) {
-      setQuery("");
-    }
-  }, []);
-  return /* @__PURE__ */ React10.createElement(FormRow, {
-    readonly,
-    renderStatic: (value3) => /* @__PURE__ */ React10.createElement("p", {
-      className: "truncate min-w-0"
-    }, value3 ?? ""),
-    ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React10.createElement(Combobox.Root, {
-    value: value3,
-    onValueChange: handleValueChange,
-    onOpenChange: handleOpenChange,
-    placeholder
-  }, /* @__PURE__ */ React10.createElement(Combobox.Trigger, {
-    disabled: !!readonly,
-    classNames: "w-full"
-  }), /* @__PURE__ */ React10.createElement(Combobox.Portal, null, /* @__PURE__ */ React10.createElement(Combobox.Content, {
-    resetSelectionOnChange: true
-  }, /* @__PURE__ */ React10.createElement(Combobox.Input, {
-    autoFocus: true,
-    value: query,
-    onValueChange: setQuery,
-    placeholder
-  }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
-    key: option.value,
-    value: option.value,
-    label: option.label ?? option.value,
-    suffix: option.secondaryLabel
-  })), normalized.length > 0 && !hasExact && /* @__PURE__ */ React10.createElement(Combobox.Item, {
-    value: trimmed,
-    label: trimmed
-  })), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null)))));
-};
-ComboboxField.displayName = "Form.ComboboxField";
-
-// src/components/Form/FormField/fields/DateField/DateField.tsx
-import { format as formatDate3 } from "date-fns";
-import React11, { useCallback as useCallback8 } from "react";
-import { Format as Format5 } from "@dxos/echo";
-import { Input as Input4 } 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 = useCallback8((next) => onValueChange(type, next), [
-    type,
-    onValueChange
-  ]);
-  const handleDateTimeChange = useCallback8((next) => {
-    const iso = localDateTimeToIso(next);
-    onValueChange(type, iso);
-  }, [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React11.createElement(FormRow, {
-    ...props,
-    readonly,
-    format
-  }, ({ value: value3 }) => {
-    switch (format) {
-      case Format5.TypeFormat.Date:
-        return /* @__PURE__ */ React11.createElement("div", {
-          className: "grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch"
-        }, /* @__PURE__ */ React11.createElement(Input4.Date, {
-          classNames: "min-w-0 overflow-hidden",
-          disabled: readonly,
-          value: value3 ?? "",
-          onValueChange: handleSimpleChange
-        }), /* @__PURE__ */ React11.createElement(Input4.TriggerIcon, null));
-      case Format5.TypeFormat.Time:
-        return /* @__PURE__ */ React11.createElement(Input4.Time, {
-          disabled: !!readonly,
-          value: value3 ?? "",
-          onValueChange: handleSimpleChange
-        });
-      case Format5.TypeFormat.DateTime:
-      default:
-        return /* @__PURE__ */ React11.createElement("div", {
-          className: "grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch"
-        }, /* @__PURE__ */ React11.createElement(Input4.DateTime, {
-          classNames: "min-w-0 overflow-hidden",
-          disabled: readonly,
-          value: isoToLocalDateTime(value3),
-          onValueChange: handleDateTimeChange
-        }), /* @__PURE__ */ React11.createElement(Input4.TriggerIcon, null));
-    }
-  });
-};
-
-// src/components/Form/FormField/fields/GeoPointField/GeoPointField.tsx
-import React12, { useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo7, useState as useState4 } from "react";
-import { GeoLocation as GeoLocation3 } from "@dxos/echo/Format";
-import { Input as Input5, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { safeParseFloat } from "@dxos/util";
-import { translationKey as translationKey3 } from "#translations";
-var GeoPointField = ({ type, readonly, getValue, onValueChange, onBlur, ...props }) => {
-  const { t } = useTranslation3(translationKey3);
-  const geoPoint = useMemo7(() => getValue() ?? [
-    0,
-    0
-  ], [
-    getValue
-  ]);
-  const value3 = useMemo7(() => GeoLocation3.fromGeoPoint(geoPoint), [
-    geoPoint
-  ]);
-  const [longitudeText, setLongitudeText] = useState4(value3.longitude?.toString());
-  const [latitudeText, setLatitudeText] = useState4(value3.latitude?.toString());
-  useEffect6(() => {
-    const location = GeoLocation3.fromGeoPoint(geoPoint);
-    setLongitudeText(location.longitude?.toString());
-    setLatitudeText(location.latitude?.toString());
-  }, [
-    geoPoint
-  ]);
-  const handleChange = useCallback9((coordinateType, setText) => (event) => {
-    const inputText = event.target.value;
-    setText(inputText);
-    if (inputText !== "" && inputText !== "-") {
-      const coord = safeParseFloat(inputText);
-      if (coord !== void 0 && !isNaN(coord)) {
-        const currentLocation = GeoLocation3.fromGeoPoint(getValue() ?? [
-          0,
-          0
-        ]);
-        const newLocation = {
-          ...currentLocation,
-          [coordinateType]: coord
-        };
-        const newValue = GeoLocation3.toGeoPoint(newLocation);
-        onValueChange(type, newValue);
-      }
-    }
-  }, [
-    type,
-    getValue,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React12.createElement(FormRow, {
-    readonly,
-    getValue,
-    standalone: true,
-    renderStatic: (point) => {
-      const location = GeoLocation3.fromGeoPoint(point ?? [
-        0,
-        0
-      ]);
-      return !location.latitude && !location.longitude ? null : /* @__PURE__ */ React12.createElement(LatLng, location);
-    },
-    ...props
-  }, ({ presentation }) => /* @__PURE__ */ React12.createElement("div", {
-    className: "grid grid-cols-2 gap-form-gap"
-  }, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Input5.Root, null, presentation.showLabel && /* @__PURE__ */ React12.createElement(Input5.Label, null, t("latitude.label")), /* @__PURE__ */ React12.createElement(Input5.TextInput, {
-    type: "number",
-    step: "0.00001",
-    min: "-90",
-    max: "90",
-    disabled: !!readonly,
-    placeholder: t("latitude.placeholder"),
-    value: latitudeText ?? "",
-    onChange: handleChange("latitude", setLatitudeText),
-    onBlur
-  }))), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Input5.Root, null, presentation.showLabel && /* @__PURE__ */ React12.createElement(Input5.Label, null, t("longitude.label")), /* @__PURE__ */ React12.createElement(Input5.TextInput, {
-    type: "number",
-    step: "0.00001",
-    min: "-180",
-    max: "180",
-    disabled: !!readonly,
-    placeholder: t("longitude.placeholder"),
-    value: longitudeText ?? "",
-    onChange: handleChange("longitude", setLongitudeText),
-    onBlur
-  })))));
-};
-var LatLng = ({ latitude = 0, longitude = 0 }) => {
-  const latHem = latitude >= 0 ? "N" : "S";
-  const lngHem = longitude >= 0 ? "E" : "W";
-  return /* @__PURE__ */ React12.createElement("span", {
-    className: "inline-flex items-center gap-form-gap"
-  }, /* @__PURE__ */ React12.createElement("span", null, /* @__PURE__ */ React12.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React12.createElement("span", {
-    className: "text-subdued"
-  }, "\xB0", latHem)), /* @__PURE__ */ React12.createElement("span", null, /* @__PURE__ */ React12.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React12.createElement("span", {
-    className: "text-subdued"
-  }, "\xB0", lngHem)));
-};
-
-// src/components/Form/FormField/fields/MarkdownField/MarkdownField.tsx
-import { useAtomValue } from "@effect-atom/atom-react";
-import React13, { useCallback as useCallback10, useMemo as useMemo8 } from "react";
-import { Ref as Ref4 } from "@dxos/echo";
-import { Doc } from "@dxos/echo-doc";
-import { IconButton as IconButton2, useTranslation as useTranslation4 } 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 translationKey4 } from "#translations";
-var editorClassNames = [
-  "min-h-[6lh] transition-colors rounded-xs p-1 px-2 bg-input-surface border border-input-separator",
-  "focus:border-separator focus-within:border-separator focus-within:bg-focus-surface",
-  "focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-focus-ring-subtle focus-within:z-[1]"
-];
-var MarkdownField = ({ type, readonly, placeholder, db, getValue, onValueChange, ...props }) => {
-  const isRef = Ref4.isRefType(type);
-  const renderStatic = (value3) => {
-    if (isRef) {
-      const reference = value3;
-      return reference ? /* @__PURE__ */ React13.createElement(RefStaticText, {
-        reference
-      }) : null;
-    }
-    return /* @__PURE__ */ React13.createElement("p", {
-      className: "whitespace-pre-wrap"
-    }, value3 ?? "");
-  };
-  const renderEditor = (value3) => {
-    if (isRef) {
-      const reference = value3;
-      if (reference) {
-        return /* @__PURE__ */ React13.createElement(RefMarkdownEditor, {
-          reference,
-          placeholder,
-          readonly: !!readonly
-        });
-      }
-      if (readonly) {
-        return null;
-      }
-      return /* @__PURE__ */ React13.createElement(CreateTextButton, {
-        db,
-        disabled: !db,
-        onCreate: (ref) => onValueChange(type, ref)
-      });
-    }
-    return /* @__PURE__ */ React13.createElement(StringMarkdownEditor, {
-      value: value3 ?? "",
-      placeholder,
-      readonly: !!readonly,
-      onChange: (next) => onValueChange(type, next)
-    });
-  };
-  return /* @__PURE__ */ React13.createElement(FormRow, {
-    readonly,
-    getValue,
-    renderStatic,
-    ...props
-  }, ({ value: value3 }) => renderEditor(value3));
-};
-var RefStaticText = ({ reference }) => {
-  const text = useAtomValue(useMemo8(() => reference.atom, [
-    reference
-  ]));
-  if (!text?.content) {
-    return null;
-  }
-  return /* @__PURE__ */ React13.createElement("p", {
-    className: "whitespace-pre-wrap"
-  }, text.content);
-};
-var RefMarkdownEditor = ({ reference, placeholder, readonly }) => {
-  const text = useAtomValue(useMemo8(() => reference.atom, [
-    reference
-  ]));
-  const dataExtensions = useMemo8(() => text ? [
-    createDataExtensions({
-      id: reference.uri,
-      text: Doc.createAccessor(text, [
-        "content"
-      ])
-    })
-  ] : [], [
-    text,
-    reference
-  ]);
-  const extensions = useBasicMarkdownExtensions({
-    placeholder,
-    readonly,
-    extensions: dataExtensions
-  });
-  if (!text) {
-    return null;
-  }
-  return /* @__PURE__ */ React13.createElement(Editor.Root, null, /* @__PURE__ */ React13.createElement(Editor.View, {
-    classNames: editorClassNames,
-    extensions
-  }));
-};
-var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange }) => {
-  const extensions = useBasicMarkdownExtensions({
-    placeholder,
-    readonly
-  });
-  const handleChange = useCallback10((next) => onChange(next), [
-    onChange
-  ]);
-  return /* @__PURE__ */ React13.createElement(Editor.Root, null, /* @__PURE__ */ React13.createElement(Editor.View, {
-    classNames: editorClassNames,
-    extensions,
-    value: value3,
-    onChange: readonly ? void 0 : handleChange
-  }));
-};
-var CreateTextButton = ({ db, disabled, onCreate }) => {
-  const { t } = useTranslation4(translationKey4);
-  const handleClick = useCallback10(() => {
-    if (!db) {
-      return;
-    }
-    onCreate(Ref4.make(db.add(Text.make())));
-  }, [
-    db,
-    onCreate
-  ]);
-  return /* @__PURE__ */ React13.createElement(IconButton2, {
-    icon: "ph--plus--regular",
-    label: t("create-text.label"),
-    onClick: handleClick,
-    disabled
-  });
-};
-
-// src/components/Form/FormField/fields/NumberField/NumberField.tsx
-import * as Option5 from "effect/Option";
-import * as SchemaAST6 from "effect/SchemaAST";
-import React14, { useCallback as useCallback11, useEffect as useEffect7, useState as useState5 } from "react";
-import { Input as Input6 } from "@dxos/react-ui";
-import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
-var getNumericConstraints = (ast) => {
-  let node = ast;
-  let min;
-  let max;
-  let integer = false;
-  while (node && SchemaAST6.isRefinement(node)) {
-    const jsonSchema = Option5.getOrUndefined(SchemaAST6.getJSONSchemaAnnotation(node));
-    if (jsonSchema != null) {
-      if ("minimum" in jsonSchema && typeof jsonSchema.minimum === "number") {
-        min = min === void 0 ? jsonSchema.minimum : Math.max(min, jsonSchema.minimum);
-      }
-      if ("maximum" in jsonSchema && typeof jsonSchema.maximum === "number") {
-        max = max === void 0 ? jsonSchema.maximum : Math.min(max, jsonSchema.maximum);
-      }
-      if ("type" in jsonSchema && jsonSchema.type === "integer" || "multipleOf" in jsonSchema && jsonSchema.multipleOf === 1) {
-        integer = true;
-      }
-    }
-    node = node.from;
-  }
-  return {
-    min,
-    max,
-    integer
-  };
-};
-var NumberField = ({ type, readonly, placeholder, getValue, onValueChange, onBlur, ...props }) => {
-  const { min, max, integer } = getNumericConstraints(type);
-  const clamp = useCallback11((n) => {
-    let value3 = integer ? Math.round(n) : n;
-    if (min !== void 0) {
-      value3 = Math.max(min, value3);
-    }
-    if (max !== void 0) {
-      value3 = Math.min(max, value3);
-    }
-    return value3;
-  }, [
-    min,
-    max,
-    integer
-  ]);
-  const [raw, setRaw] = useState5(() => {
-    const v = getValue();
-    return v !== void 0 ? String(v) : "";
-  });
-  const externalValue = getValue();
-  useEffect7(() => {
-    if (externalValue !== safeParseFloat2(raw)) {
-      setRaw(externalValue !== void 0 ? String(externalValue) : "");
-    }
-  }, [
-    externalValue
-  ]);
-  const handleChange = useCallback11((event) => {
-    const value3 = event.target.value;
-    setRaw(value3);
-    const parsed = safeParseFloat2(value3);
-    if (parsed !== void 0) {
-      onValueChange(type, clamp(parsed));
-    }
-  }, [
-    type,
-    onValueChange,
-    clamp
-  ]);
-  const handleBlur = useCallback11((event) => {
-    const parsed = safeParseFloat2(raw);
-    if (parsed === void 0) {
-      const committed = getValue();
-      setRaw(committed !== void 0 ? String(committed) : "");
-    } else {
-      setRaw(String(clamp(parsed)));
-    }
-    onBlur(event);
-  }, [
-    raw,
-    getValue,
-    onBlur,
-    clamp
-  ]);
-  return /* @__PURE__ */ React14.createElement(FormRow, {
-    readonly,
-    getValue,
-    ...props
-  }, () => /* @__PURE__ */ React14.createElement(Input6.TextInput, {
-    type: "number",
-    disabled: !!readonly,
-    placeholder,
-    value: raw,
-    min,
-    max,
-    step: integer ? 1 : void 0,
-    onChange: handleChange,
-    onBlur: handleBlur
-  }));
-};
-
-// src/components/Form/FormField/fields/PasswordField/PasswordField.tsx
-import React15, { useCallback as useCallback12 } from "react";
-import { Input as Input7 } from "@dxos/react-ui";
-var PasswordField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
-  const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React15.createElement(FormRow, {
-    readonly,
-    ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input7.TextInput, {
-    type: "password",
-    noAutoFill: true,
-    disabled: !!readonly,
-    placeholder,
-    value: value3,
-    onBlur,
-    onChange: handleChange
-  }));
-};
-
-// src/components/Form/FormField/fields/RefField/RefField.tsx
-import React17, { useCallback as useCallback14, useMemo as useMemo9, useState as useState7 } from "react";
-import "@dxos/lit-ui/dx-tag-picker.pcss";
-import { Entity, Filter, Obj, Query, Ref as Ref5, Scope, Type as Type2 } from "@dxos/echo";
-import { useType as defaultUseType2, useQuery } from "@dxos/echo-react";
-import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo/internal";
-import { SchemaEx as SchemaEx7 } from "@dxos/effect";
-import { DXN as DXN2, EID, URI } from "@dxos/keys";
-import { DxAnchor } from "@dxos/lit-ui/react";
-import { Button, Icon as Icon3, Input as Input8, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { ParentLabelAnnotationId } from "@dxos/schema";
-import { translationKey as translationKey6 } from "#translations";
-
-// src/components/ObjectPicker/ObjectPicker.tsx
-import React16, { forwardRef, useCallback as useCallback13, useState as useState6 } from "react";
-import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Combobox as Combobox2 } from "@dxos/react-ui-list";
-import { useSearchListResults } from "@dxos/react-ui-search";
-import { translationKey as translationKey5 } from "#translations";
-var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, onSelect, onCreate, ...props }, forwardedRef) => {
-  const { t } = useTranslation5(translationKey5);
-  const [showForm, setShowForm] = useState6(false);
-  const [formInitialValue, setFormInitialValue] = useState6("");
-  const { results, query, handleSearch } = useSearchListResults({
-    items: options
-  });
-  const handleFormSave = useCallback13(async (values) => {
-    await onCreate?.(values);
-    setShowForm(false);
-    setFormInitialValue("");
-  }, [
-    onCreate
-  ]);
-  const handleFormCancel = useCallback13(() => {
-    setShowForm(false);
-    setFormInitialValue("");
-  }, []);
-  const handleKeyDown = useCallback13((event) => {
-    if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
-      event.stopPropagation();
-      event.preventDefault();
-      const input = event.currentTarget.querySelector('input[type="text"]');
-      const currentQuery = input?.value || "";
-      setFormInitialValue(currentQuery);
-      setShowForm(true);
-    }
-  }, [
-    createSchema
-  ]);
-  if (showForm && createSchema) {
-    return /* @__PURE__ */ React16.createElement(Combobox2.Content, {
-      ...props,
-      onKeyDownCapture: handleKeyDown,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React16.createElement(Popover.Viewport, null, /* @__PURE__ */ React16.createElement(Form.Root, {
-      testId: "create-referenced-object-form",
-      schema: createSchema,
-      defaultValues: createInitialValuePath ? {
-        [createInitialValuePath]: formInitialValue
-      } : {},
-      fieldMap: createFieldMap3,
-      onSave: handleFormSave,
-      onCancel: handleFormCancel
-    }, /* @__PURE__ */ React16.createElement(Form.Viewport, null, /* @__PURE__ */ React16.createElement(Form.Content, null, /* @__PURE__ */ React16.createElement(Form.FieldSet, null), /* @__PURE__ */ React16.createElement(Form.Actions, null))))), /* @__PURE__ */ React16.createElement(Combobox2.Arrow, null));
-  }
-  return /* @__PURE__ */ React16.createElement(Combobox2.Content, {
-    ...props,
-    onKeyDownCapture: handleKeyDown,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(Combobox2.Input, {
-    placeholder: t("ref-field-combobox-input.placeholder"),
-    autoFocus: true,
-    value: query,
-    onValueChange: handleSearch
-  }), /* @__PURE__ */ React16.createElement(Combobox2.List, null, results.map((option) => /* @__PURE__ */ React16.createElement(Combobox2.Item, {
-    key: option.id,
-    value: option.id,
-    label: option.label,
-    description: option.description,
-    checked: selectedIds?.includes(option.id),
-    onSelect: () => onSelect?.(option.id),
-    classNames: "flex items-center gap-2"
-  })), createSchema && onCreate && /* @__PURE__ */ React16.createElement(CreateItem, {
-    query,
-    createOptionLabel,
-    createOptionIcon: createOptionIcon ?? "ph--plus--regular",
-    onCreateItemSelect: (currentQuery) => {
-      setFormInitialValue(currentQuery);
-      setShowForm(true);
-    }
-  })), /* @__PURE__ */ React16.createElement(Combobox2.Arrow, null));
-});
-var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation5(translationKey5);
-  const label = createOptionLabel ? t(createOptionLabel[0], {
-    ns: createOptionLabel[1].ns,
-    text: query
-  }) : t("create-option.label");
-  return /* @__PURE__ */ React16.createElement(Combobox2.Item, {
-    value: "__create__",
-    label,
-    icon: createOptionIcon,
-    classNames: "flex items-center gap-2",
-    closeOnSelect: false,
-    onSelect: () => {
-      onCreateItemSelect(query);
-    }
-  });
-};
-ObjectPickerContent.displayName = "ObjectPicker.Content";
-var ObjectPicker = {
-  Root: Combobox2.Root,
-  Portal: Combobox2.Portal,
-  Trigger: Combobox2.Trigger,
-  VirtualTrigger: Combobox2.VirtualTrigger,
-  Content: ObjectPickerContent
-};
-
-// src/components/Form/FormField/fields/RefField/RefField.tsx
-var isRefSnapshot = (val) => {
-  return typeof val === "object" && typeof val?.["/"] === "string";
-};
-var findRefOption = (value3, options) => {
-  const isRef = Ref5.isRef(value3);
-  if (!isRef && !isRefSnapshot(value3)) {
-    return void 0;
-  }
-  const valueUri = isRef ? value3.uri : value3["/"];
-  const directMatch = options.find((option) => option.id === valueUri);
-  if (directMatch) {
-    return directMatch;
-  }
-  const valueEid = EID.tryParse(valueUri);
-  if (!valueEid) {
-    return void 0;
-  }
-  const valueSpaceId = EID.getSpaceId(valueEid);
-  const valueLocal = EID.toLocal(valueEid);
-  return options.find((option) => {
-    const optionEid = EID.tryParse(option.id);
-    if (!optionEid) {
-      return false;
-    }
-    const optionSpaceId = EID.getSpaceId(optionEid);
-    if (valueSpaceId != null && optionSpaceId != null && valueSpaceId !== optionSpaceId) {
-      return false;
-    }
-    return EID.equals(EID.toLocal(optionEid), valueLocal);
-  });
-};
-var defaultGetOptions = (results, { parentLabel, getTypePlaceholder } = {}) => results.filter((result) => !parentLabel || Obj.getParent(result) != null).map((result) => {
-  const id = Entity.getURI(result, {
-    prefer: "named"
-  });
-  const parent = parentLabel ? Obj.getParent(result) : void 0;
-  const labelEntity = parent ?? result;
-  const typename = Entity.getTypename(labelEntity);
-  const label = Entity.getLabel(labelEntity) ?? (typename ? getTypePlaceholder?.(typename) : void 0) ?? id;
-  return {
-    id,
-    label
-  };
-});
-var defaultUseResults = (db, typename) => useQuery(db, !typename ? Query.select(Filter.nothing()) : typename === ANY_OBJECT_TYPENAME ? Query.select(Filter.everything()) : Query.select(Filter.type(DXN2.make(typename))).from(Scope.space(), Scope.registry()));
-var RefField = (props) => {
-  const { type, readonly, label, jsonPath, placeholder, presentation, required, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, db, useType: useType2 = defaultUseType2, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, resolveCreateEntry, onValueChange } = props;
-  const { t } = useTranslation6(translationKey6);
-  const { status, error } = getStatus();
-  const resolved = presentationFor(presentation);
-  const typename = useMemo9(() => type ? SchemaEx7.findAnnotation(type, ReferenceAnnotationId2)?.typename : void 0, [
-    type
-  ]);
-  const getTypePlaceholder = useCallback14((placeholderTypename) => {
-    const segment = placeholderTypename.split(/[.:/]/).filter(Boolean).pop() ?? placeholderTypename;
-    const humanized = segment.charAt(0).toUpperCase() + segment.slice(1);
-    return t("object-name.placeholder", {
-      ns: placeholderTypename,
-      defaultValue: humanized
-    });
-  }, [
-    t
-  ]);
-  const results = useResults(db, typename);
-  const options = useMemo9(() => {
-    const parentLabel = type ? SchemaEx7.findAnnotation(type, ParentLabelAnnotationId) === true : false;
-    return getOptions(results, {
-      parentLabel,
-      getTypePlaceholder
-    });
-  }, [
-    results,
-    getOptions,
-    type,
-    getTypePlaceholder
-  ]);
-  const handleGetValue = useCallback14(() => findRefOption(getValue(), options), [
-    options,
-    getValue
-  ]);
-  const item = handleGetValue();
-  const selectedIds = useMemo9(() => item ? [
-    item.id
-  ] : [], [
-    item
-  ]);
-  const createSchema = useType2(db, typename && typename !== ANY_OBJECT_TYPENAME ? DXN2.make(typename) : void 0);
-  const createEntry = typename ? resolveCreateEntry?.(typename) : void 0;
-  const [open, setOpen] = useState7(false);
-  const handleCreate = useCallback14(async (values) => {
-    if (createEntry?.createObject && db) {
-      const newObject = await createEntry.createObject(values, db);
-      if (newObject) {
-        onValueChange(type, Ref5.make(newObject));
-      }
-    } else if (createSchema && onCreate) {
-      const newObject = await onCreate(createSchema, values);
-      if (newObject) {
-        onValueChange(type, Ref5.make(newObject));
-      }
-    }
-    setOpen(false);
-  }, [
-    createEntry,
-    db,
-    createSchema,
-    onCreate,
-    type,
-    onValueChange
-  ]);
-  const handleUpdate = useCallback14((id) => {
-    const item2 = options.find((option) => option.id === id);
-    const ref = item2 ? Ref5.fromURI(URI.make(item2.id)) : void 0;
-    onValueChange(type, ref);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleSelect = useCallback14((id) => {
-    if (item?.id === id) {
-      handleUpdate(void 0);
-    } else {
-      handleUpdate(id);
-    }
-  }, [
-    item,
-    handleUpdate
-  ]);
-  if (!typename || (readonly || resolved.isStatic) && !item) {
-    return null;
-  }
-  return /* @__PURE__ */ React17.createElement(Input8.Root, {
-    validationValence: status
-  }, resolved.showLabel && /* @__PURE__ */ React17.createElement(FormFieldLabel, {
-    error,
-    readonly,
-    required,
-    label,
-    path: jsonPath
-  }), /* @__PURE__ */ React17.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React17.createElement("p", {
-    className: "text-description mb-2"
-  }, t("empty-readonly-ref-field.label")) : /* @__PURE__ */ React17.createElement(DxAnchor, {
-    key: item.id,
-    dxn: item.id,
-    rootclassname: "me-1"
-  }, item.label) : /* @__PURE__ */ React17.createElement(ObjectPicker.Root, {
-    open,
-    onOpenChange: setOpen
-  }, /* @__PURE__ */ React17.createElement(ObjectPicker.Trigger, {
-    asChild: true,
-    classNames: "p-0"
-  }, item ? /* @__PURE__ */ React17.createElement("div", {
-    className: "flex gap-form-gap w-full"
-  }, /* @__PURE__ */ React17.createElement(Input8.Root, {
-    key: item.id
-  }, /* @__PURE__ */ React17.createElement(Input8.TextInput, {
-    value: item.label,
-    readOnly: true,
-    classNames: "w-full"
-  }))) : /* @__PURE__ */ React17.createElement(Button, {
-    classNames: "w-full text-start gap-form-gap"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    className: "grow overflow-hidden"
-  }, /* @__PURE__ */ React17.createElement("span", {
-    className: "truncate text-description"
-  }, placeholder || label || t("ref-field.placeholder"))), /* @__PURE__ */ React17.createElement(Icon3, {
-    size: 3,
-    icon: "ph--caret-down--bold"
-  }))), /* @__PURE__ */ React17.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React17.createElement(ObjectPicker.Content, {
-    classNames: "dx-card-popover-width",
-    options,
-    selectedIds,
-    // Prefer the plugin-registered inputSchema; fall back to stripping hidden fields
-    // (`FormInputAnnotation.set(false)`) from the raw ECHO type schema so the form's
-    // validator doesn't reject required-but-hidden fields such as backing-object refs
-    // supplied by a `FactoryAnnotation`.
-    createSchema: createEntry?.inputSchema ?? (createSchema && omitHiddenFormFields(omitId(Type2.getSchema(createSchema)))),
-    createOptionLabel,
-    createOptionIcon,
-    createInitialValuePath,
-    createFieldMap: createFieldMap3,
-    // Offer inline create when the caller wired a handler OR a plugin-registered
-    // createObject override is available. A resolvable `createSchema` alone is not
-    // enough (e.g. operation refs, whose objects can't be created ad hoc).
-    onCreate: onCreate || createEntry?.createObject ? handleCreate : void 0,
-    onSelect: handleSelect
-  })))), resolved.showError && /* @__PURE__ */ React17.createElement(Input8.DescriptionAndValidation, null, error));
-};
-
-// src/components/Form/FormField/fields/RefField/InlineRefField.tsx
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React18, { useCallback as useCallback15, useMemo as useMemo10 } from "react";
-import { Obj as Obj2, Ref as Ref6, Type as Type3 } from "@dxos/echo";
-import { useType as defaultUseType3 } from "@dxos/echo-react";
-import { ReferenceAnnotationId as ReferenceAnnotationId3 } from "@dxos/echo/Annotation";
-import { SchemaEx as SchemaEx8 } from "@dxos/effect";
-import { DXN as DXN3 } from "@dxos/keys";
-import { IconButton as IconButton3, Input as Input9, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { translationKey as translationKey7 } from "#translations";
-var InlineRefField = (props) => {
-  const { type, readonly, label, jsonPath, presentation, required, db, getValue, onValueChange, onCreate, useType: useType2 = defaultUseType3 } = props;
-  const { t } = useTranslation7(translationKey7);
-  const resolved = presentationFor(presentation);
-  const reference = getValue();
-  const typename = useMemo10(() => type ? SchemaEx8.findAnnotation(type, ReferenceAnnotationId3)?.typename : void 0, [
-    type
-  ]);
-  const createType = useType2(db, typename ? DXN3.make(typename) : void 0);
-  const handleCreate = useCallback15(async () => {
-    if (!createType || !onCreate) {
-      return;
-    }
-    const newObject = await onCreate(createType, {});
-    if (newObject) {
-      onValueChange(type, Ref6.make(newObject));
-    }
-  }, [
-    createType,
-    onCreate,
-    type,
-    onValueChange
-  ]);
-  if (readonly && !reference) {
-    return null;
-  }
-  return /* @__PURE__ */ React18.createElement(Input9.Root, null, resolved.showLabel && /* @__PURE__ */ React18.createElement(FormFieldLabel, {
-    readonly,
-    required,
-    label,
-    path: jsonPath
-  }), reference ? /* @__PURE__ */ React18.createElement(InlineForm, {
-    reference,
-    db,
-    readonly,
-    useType: useType2
-  }) : !readonly && onCreate && /* @__PURE__ */ React18.createElement(IconButton3, {
-    classNames: "w-full gap-form-gap",
-    disabled: !createType || !db,
-    icon: "ph--plus--regular",
-    label: label || t("ref-field.placeholder"),
-    onClick: () => void handleCreate()
-  }));
-};
-var InlineForm = ({ reference, db, readonly, useType: useType2 = defaultUseType3 }) => {
-  const target = useAtomValue2(useMemo10(() => reference.atom, [
-    reference
-  ]));
-  const typeUri = target ? Obj2.getTypeURI(target) : void 0;
-  const typeFromRegistry = useType2(db, typeUri);
-  const targetType = target && Obj2.getType(target) || typeFromRegistry;
-  const formSchema = useMemo10(() => targetType ? omitId(Type3.getSchema(targetType)) : void 0, [
-    targetType
-  ]);
-  const defaultValues = useMemo10(() => target ? {
-    ...target
-  } : {}, [
-    target
-  ]);
-  const handleChange = useCallback15((values, { isValid, changed }) => {
-    if (!isValid || !target) {
-      return;
-    }
-    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
-    if (changedPaths.length === 0) {
-      return;
-    }
-    Obj2.update(target, () => {
-      for (const path of changedPaths) {
-        const parts = SchemaEx8.splitJsonPath(path);
-        Obj2.setValue(target, parts, Obj2.getValue(values, parts));
-      }
-    });
-  }, [
-    target
-  ]);
-  if (!target || !formSchema) {
-    return null;
-  }
-  return /* @__PURE__ */ React18.createElement(FormRoot, {
-    db,
-    schema: formSchema,
-    defaultValues,
-    onValuesChanged: handleChange
-  }, /* @__PURE__ */ React18.createElement(FormContent, null, /* @__PURE__ */ React18.createElement(FormFieldSetController, {
-    collapsible: true,
-    readonly
-  })));
-};
-
-// src/components/Form/FormField/fields/SelectOptionField/SelectOptionField.tsx
-import React19, { useCallback as useCallback16, useEffect as useEffect8, useRef as useRef6, useState as useState8 } from "react";
-import { PublicKey } from "@dxos/keys";
-import { IconButton as IconButton4, Input as Input10, Tag as Tag2, ToggleIconButton, useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { OrderedList as OrderedList2 } 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, jsonPath, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation8(translationKey8);
-  const { status, error } = getStatus();
-  const [selected, setSelectedId] = useState8(null);
-  const [isNewOption, setIsNewOption] = useState8(false);
-  const inputRef = useRef6(null);
-  const options = getValue();
-  useEffect8(() => {
-    if (options === void 0) {
-      onValueChange(type, []);
-    }
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const randomHue = () => {
-    const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
-    if (unusedHues.length > 0) {
-      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
-    }
-    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hues.filter((hue) => !lastThree.has(hue));
-    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
-  };
-  const handleAdd = useCallback16(() => {
-    const newId = PublicKey.random().truncate();
-    const newOption = {
-      id: newId,
-      title: "",
-      color: randomHue()
-    };
-    onValueChange(type, [
-      ...options ?? [],
-      newOption
-    ]);
-    setSelectedId(newId);
-    setIsNewOption(true);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleDelete = useCallback16((id) => {
-    const newOptions = options?.filter((option) => option.id !== id) ?? [];
-    onValueChange(type, newOptions);
-    setSelectedId(null);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleMove = useCallback16((from, to) => {
-    if (!options) {
-      return;
-    }
-    const newOptions = [
-      ...options
-    ];
-    const [removed] = newOptions.splice(from, 1);
-    newOptions.splice(to, 0, removed);
-    onValueChange(type, newOptions);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleClick = useCallback16((id) => {
-    setSelectedId((current) => current === id ? null : id);
-  }, []);
-  const handleTitleChange = useCallback16((id) => (e) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      title: e.target.value
-    } : o);
-    onValueChange(type, newOptions ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleKeyDown = useCallback16((ev) => {
-    if (ev.key === "Enter") {
-      setSelectedId(null);
-    }
-  }, []);
-  const handleColorChange = useCallback16((id) => (hue) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      color: hue
-    } : o);
-    onValueChange(type, newOptions ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  useEffect8(() => {
-    if (selected && isNewOption && inputRef.current) {
-      inputRef.current.focus();
-      setIsNewOption(false);
-    }
-  }, [
-    selected,
-    isNewOption
-  ]);
-  return /* @__PURE__ */ React19.createElement(Input10.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
-    error,
-    readonly,
-    label,
-    path: jsonPath
-  }), /* @__PURE__ */ React19.createElement("div", null, options && /* @__PURE__ */ React19.createElement(OrderedList2.Root, {
-    items: options,
-    isItem: (_item) => true,
-    getId: (option) => option.id,
-    onMove: readonly ? void 0 : handleMove,
-    readonly: !!readonly
-  }, ({ items }) => /* @__PURE__ */ React19.createElement(OrderedList2.Content, {
-    classNames: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ React19.createElement(OrderedList2.Item, {
-    key: item.id,
-    id: item.id,
-    item,
-    canDrag: !readonly,
-    classNames: "flex flex-col cursor-pointer rounded-xs dx-hover"
-  }, /* @__PURE__ */ React19.createElement("div", {
-    className: "flex items-center"
-  }, /* @__PURE__ */ React19.createElement(OrderedList2.DragHandle, null), /* @__PURE__ */ React19.createElement("div", {
-    className: "flex grow items-center truncate px-2",
-    onClick: () => handleClick(item.id)
-  }, /* @__PURE__ */ React19.createElement(Tag2, {
-    hue: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ React19.createElement(ToggleIconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    active: selected === item.id,
-    icon: "ph--caret-right--regular",
-    label: t(selected === item.id ? "collapse.label" : "expand.label", {
-      ns: osTranslations
-    }),
-    onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ React19.createElement("div", {
-    className: "flex flex-col p-form-padding gap-form-gap dx-density-md"
-  }, /* @__PURE__ */ React19.createElement(Input10.Label, {
-    classNames: "text-sm"
-  }, t("select-option.label")), /* @__PURE__ */ React19.createElement("div", {
-    className: "grid grid-cols-[1fr_min-content_min-content] gap-form-gap"
-  }, /* @__PURE__ */ React19.createElement(Input10.TextInput, {
-    disabled: !!readonly,
-    placeholder: t("select-option-label.placeholder"),
-    ref: selected === item.id ? inputRef : void 0,
-    value: item.title,
-    onChange: handleTitleChange(item.id),
-    onKeyDown: handleKeyDown,
-    classNames: "flex-1"
-  }), /* @__PURE__ */ React19.createElement(HuePicker, {
-    disabled: !!readonly,
-    value: item.color,
-    onChange: handleColorChange(item.id)
-  }), /* @__PURE__ */ React19.createElement(IconButton4, {
-    disabled: !!readonly,
-    icon: "ph--trash--fill",
-    iconOnly: true,
-    label: t("select-option-delete.button"),
-    onClick: () => handleDelete(item.id)
-  }))))), /* @__PURE__ */ React19.createElement(IconButton4, {
-    classNames: "w-full",
-    variant: "ghost",
-    icon: "ph--plus--regular",
-    label: t("select-option-add.button"),
-    onClick: handleAdd,
-    disabled: !!readonly
-  })))));
-};
-
-// src/components/Form/FormField/fields/TextAreaField/TextAreaField.tsx
-import React20, { useCallback as useCallback17 } from "react";
-import { Input as Input11 } from "@dxos/react-ui";
-var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
-  const handleChange = useCallback17((event) => onValueChange(type, event.target.value), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React20.createElement(FormRow, {
-    readonly,
-    ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React20.createElement(Input11.TextArea, {
-    rows: 5,
-    disabled: !!readonly,
-    placeholder,
-    value: value3,
-    onChange: handleChange,
-    onBlur
-  }));
-};
-
-// src/components/Form/FormField/fields/TupleField/TupleField.tsx
-import React21 from "react";
-import { Input as Input12 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/ui-theme";
-import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
-var gridCols = [
-  "grid-cols-1",
-  "grid-cols-2",
-  "grid-cols-3",
-  "grid-cols-4"
-];
-var TupleField = ({ binding, type, readonly, label, jsonPath, getStatus, getValue, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const values = getValue() ?? {};
-  return /* @__PURE__ */ React21.createElement(Input12.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React21.createElement(FormFieldLabel, {
-    error,
-    readonly,
-    label,
-    path: jsonPath
-  }), /* @__PURE__ */ React21.createElement("div", {
-    className: mx4("grid gap-form-gap", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React21.createElement(Input12.TextInput, {
-    key: prop,
-    type: "number",
-    disabled: !!readonly,
-    value: values[prop],
-    onChange: (event) => {
-      onValueChange(type, {
-        ...values,
-        [prop]: safeParseFloat3(event.target.value, 0)
-      });
-    },
-    onBlur
-  }))));
-};
-
-// src/components/Form/FormLayout/FormLayout.tsx
-import * as Option6 from "effect/Option";
-import * as Schema4 from "effect/Schema";
-import * as SchemaAST7 from "effect/SchemaAST";
-import * as String3 from "effect/String";
-import React22, { Fragment, useMemo as useMemo11 } from "react";
-import { Annotation as Annotation5 } from "@dxos/echo";
-import { SchemaEx as SchemaEx9 } from "@dxos/effect";
-import { Input as Input13 } from "@dxos/react-ui";
-
-// src/components/Form/FormLayout/parser.ts
-var LayoutParseError = class extends Error {
-  position;
-  _tag = "LayoutParseError";
-  constructor(message, position) {
-    super(position !== void 0 ? `${message} (at position ${position})` : message), this.position = position;
-  }
-};
-var TAG_RE = /<\s*(\/?)\s*(\w+)([^>]*?)(\/?)\s*>/g;
-var ATTR_RE = /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|(\d+))/g;
-var parseAttrs = (raw) => {
-  const attrs = {};
-  ATTR_RE.lastIndex = 0;
-  let match2;
-  while ((match2 = ATTR_RE.exec(raw)) !== null) {
-    const [, key, doubleQuoted, singleQuoted, bare] = match2;
-    attrs[key] = doubleQuoted ?? singleQuoted ?? bare;
-  }
-  return attrs;
-};
-var tokenize = (input) => {
-  const tokens = [];
-  TAG_RE.lastIndex = 0;
-  let match2;
-  let cursor = 0;
-  while ((match2 = TAG_RE.exec(input)) !== null) {
-    const between = input.slice(cursor, match2.index);
-    if (between.trim().length > 0) {
-      throw new LayoutParseError(`unexpected text content: ${JSON.stringify(between.trim())}`, cursor);
-    }
-    const [, slash, name, attrsRaw, selfSlash] = match2;
-    if (slash) {
-      tokens.push({
-        type: "close",
-        name,
-        position: match2.index
-      });
-    } else {
-      tokens.push({
-        type: "open",
-        name,
-        attrs: parseAttrs(attrsRaw),
-        selfClosing: selfSlash === "/",
-        position: match2.index
-      });
-    }
-    cursor = match2.index + match2[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/FormLayout/FormLayout.tsx
-var FORM_LAYOUT_NAME = "Form.Layout";
-var FormLayout = ({ schema, template, name = Annotation5.DEFAULT_LAYOUT_NAME, path, readonly, layout, projection, ...props }) => {
-  const annotated = Option6.getOrUndefined(Annotation5.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 = useMemo11(() => parseLayout(source), [
-    source
-  ]);
-  return /* @__PURE__ */ React22.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__ */ React22.createElement("div", {
-      className: "grid gap-x-form-gap",
-      style: {
-        gridTemplateColumns: `repeat(${node.cols}, minmax(0, 1fr))`
-      }
-    }, node.children.map((child, index) => /* @__PURE__ */ React22.createElement(Fragment, {
-      key: index
-    }, /* @__PURE__ */ React22.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, required } = resolved;
-  const path = [
-    ...basePath,
-    ...segments
-  ];
-  const span = node.span ? {
-    gridColumn: `span ${node.span} / span ${node.span}`
-  } : void 0;
-  return /* @__PURE__ */ React22.createElement("div", {
-    className: "min-w-0",
-    style: span
-  }, /* @__PURE__ */ React22.createElement(FormFieldErrorBoundary, {
-    path
-  }, labelType ? /* @__PURE__ */ React22.createElement(LabelField, {
-    schema: Schema4.make(labelType),
-    label: title ?? String3.capitalize(leafName),
-    path,
-    layout: props.layout
-  }) : /* @__PURE__ */ React22.createElement(FormField, {
-    type,
-    name: leafName,
-    path,
-    required,
-    ...props
-  })));
-};
-var resolvePropertySignature = (ast, segments) => {
-  let node = ast;
-  for (let index = 0; index < segments.length; index++) {
-    const typeLiteral = SchemaEx9.findNode(node, SchemaAST7.isTypeLiteral);
-    if (!typeLiteral) {
-      return void 0;
-    }
-    const prop = SchemaAST7.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 } = SchemaEx9.getBaseType(prop);
-  const type = prop.annotations && Reflect.ownKeys(prop.annotations).length > 0 ? {
-    ...baseType,
-    annotations: {
-      ...baseType.annotations,
-      ...prop.annotations
-    }
-  } : baseType;
-  const title = SchemaEx9.getAnnotation(SchemaAST7.TitleAnnotationId)(type);
-  const labelType = SchemaEx9.findNode(prop.type, SchemaAST7.isTypeLiteral);
-  const labelled = labelType != null && Option6.isSome(Annotation5.LabelAnnotation.getFromAst(labelType));
-  return {
-    type,
-    segments,
-    leafName: segments[segments.length - 1],
-    title,
-    labelType: labelled ? labelType : void 0,
-    required: !prop.isOptional
-  };
-};
-var LabelField = ({ schema, label, path, layout }) => {
-  const { variant = "default" } = useFormContext(FORM_LAYOUT_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  const { getValue } = useFormFieldState(FORM_LAYOUT_NAME, path);
-  const value3 = getValue();
-  const text = value3 == null ? void 0 : Annotation5.getLabelWithSchema(schema, value3);
-  if (text == null || text.trim().length === 0) {
-    return null;
-  }
-  const presentation = presentationFor(layout);
-  return /* @__PURE__ */ React22.createElement(Input13.Root, null, /* @__PURE__ */ React22.createElement("div", {
-    className: styles3.field()
-  }, presentation.showLabel && /* @__PURE__ */ React22.createElement(FormFieldLabel, {
-    variant,
-    readonly: true,
-    label,
-    path: SchemaEx9.createJsonPath(path)
-  }), /* @__PURE__ */ React22.createElement("div", {
-    className: styles3.fieldControl()
-  }, /* @__PURE__ */ React22.createElement("p", {
-    className: "truncate min-w-0",
-    title: text
-  }, text))));
-};
-
-// src/components/Form/FormFieldSet/FormFieldSetContainer.tsx
-import React23, { useState as useState9 } from "react";
-import { ToggleIconButton as ToggleIconButton2, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/ui-theme";
-import { translationKey as translationKey9 } from "#translations";
-var styles = formTheme.styles();
-var FormFieldSetContainer = ({ classNames, label, path, readonly, presentation, collapsible, children }) => {
-  const { t } = useTranslation9(translationKey9);
-  const [collapsed, setCollapsed] = useState9(false);
-  const showBody = !(collapsible && collapsed);
-  const content = /* @__PURE__ */ React23.createElement(React23.Fragment, null, presentation.showLabel && label && /* @__PURE__ */ React23.createElement(FormFieldHeader, {
-    label,
-    path,
-    readonly,
-    classNames: "pl-2",
-    actions: collapsible ? /* @__PURE__ */ React23.createElement(ToggleIconButton2, {
-      active: !collapsed,
-      classNames: "px-1 mr-0.5",
-      variant: "ghost",
-      density: "xs",
-      iconOnly: true,
-      icon: "ph--caret-right--regular",
-      label: t(collapsed ? "expand-fields.label" : "collapse-fields.label")
-    }) : void 0,
-    onClick: collapsible ? () => setCollapsed((value3) => !value3) : void 0
-  }), showBody && (collapsible ? /* @__PURE__ */ React23.createElement("div", {
-    className: styles.fieldSetBody()
-  }, children) : children));
-  if (collapsible) {
-    return /* @__PURE__ */ React23.createElement("div", {
-      className: styles.fieldSetBoxOuter()
-    }, /* @__PURE__ */ React23.createElement("div", {
-      className: styles.fieldSetBox({
-        class: mx5(classNames)
-      })
-    }, content));
-  }
-  return classNames ? /* @__PURE__ */ React23.createElement("div", {
-    className: mx5(classNames)
-  }, content) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, content);
-};
-
-// src/components/Form/FormFieldSet/FormFieldSet.tsx
-var FORM_FIELDSET_NAME = "Form.FieldSet";
-var FormFieldSet = ({ classNames, label, schema, readonly, path, sort, collapsible, filter, projection, layout, layoutName = DEFAULT_LAYOUT_NAME, ...props }) => {
-  const values = useFormValues(FORM_FIELDSET_NAME, path);
-  const properties = useFormFieldSetProperties({
-    schema,
-    values,
-    filter,
-    sort,
-    projection
-  });
-  if ((readonly || layout === "static") && values == null) {
-    return null;
-  }
-  const layouts = schema ? Option7.getOrUndefined(FormLayoutAnnotation.get(schema)) : void 0;
-  const body = layouts?.[layoutName] !== void 0 && schema ? /* @__PURE__ */ React24.createElement(FormLayout, {
-    schema,
-    name: layoutName,
-    path,
-    readonly,
-    layout,
-    projection,
-    ...props
-  }) : properties.map((property) => {
-    const name = property.name.toString();
-    return /* @__PURE__ */ React24.createElement(FormFieldErrorBoundary, {
-      key: name,
-      path: [
-        ...path ?? [],
-        name
-      ]
-    }, /* @__PURE__ */ React24.createElement(FormField, {
-      type: property.type,
-      name,
-      path: [
-        ...path ?? [],
-        name
-      ],
-      required: !property.isOptional,
-      readonly,
-      layout,
-      projection,
-      ...props
-    }));
-  });
-  return /* @__PURE__ */ React24.createElement(FormFieldSetContainer, {
-    classNames,
-    label,
-    path: SchemaEx10.createJsonPath(path ?? []),
-    readonly,
-    presentation: presentationFor(layout),
-    collapsible
-  }, body);
-};
-FormFieldSet.displayName = FORM_FIELDSET_NAME;
-var useFormFieldSetProperties = ({ schema, filter, projection, values, sort }) => {
-  return useMemo12(() => {
-    if (!schema) {
-      return [];
-    }
-    const schemaProps = getRootFormProperties(schema.ast, values);
-    const filteredProps = filter ? filter(schemaProps) : schemaProps;
-    if (projection) {
-      const fieldProjections = projection.getFieldProjections();
-      const hiddenProperties = new Set(projection.getHiddenProperties());
-      const visibleProps = filteredProps.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-      const orderedProps = [];
-      for (const fieldProjection of fieldProjections) {
-        const fieldPath = String(fieldProjection.field.path);
-        const prop = visibleProps.find((prop2) => prop2.name === fieldPath);
-        if (prop) {
-          orderedProps.push(prop);
-        }
-      }
-      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
-      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
-      orderedProps.push(...remainingProps);
-      return orderedProps;
-    }
-    return sort ? [
-      ...filteredProps
-    ].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filteredProps;
-  }, [
-    schema,
-    values,
-    filter,
-    sort,
-    projection
-  ]);
-};
-
-// src/components/Form/FormControls.tsx
-var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
-  const form = useFormHandler({
-    schema,
-    values,
-    onSave,
-    onCancel,
-    ...props
-  });
-  return /* @__PURE__ */ React25.createElement(FormContextProvider, {
-    form,
-    ...props
-  }, children);
-};
-FormRoot.displayName = "Form.Root";
-var FORM_VIEWPORT_NAME = "Form.Viewport";
-var FormViewport = composable(({ children, scroll, gutter = "sm", ...props }, forwardedRef) => {
-  const { variant = "default" } = useFormContext(FORM_VIEWPORT_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  const span = "[.dx-column-root_&]:col-span-full";
-  if (scroll) {
-    return /* @__PURE__ */ React25.createElement(Column.Root, {
-      gutter,
-      classNames: [
-        "dx-expander",
-        span
-      ]
-    }, /* @__PURE__ */ React25.createElement(ScrollArea.Root, {
-      ...composableProps(props, {
-        classNames: styles3.viewport()
-      }),
-      orientation: "vertical",
-      centered: true,
-      padding: true,
-      thin: true,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React25.createElement(ScrollArea.Viewport, null, children)));
-  }
-  return /* @__PURE__ */ React25.createElement(Column.Root, {
-    ...composableProps(props, {
-      classNames: [
-        "w-full min-w-0",
-        span,
-        styles3.viewport()
-      ]
-    }),
-    gutter,
-    ref: forwardedRef
-  }, children);
-});
-FormViewport.displayName = FORM_VIEWPORT_NAME;
-var FORM_CONTENT_NAME = "Form.Content";
-var FormContent = composable(({ children, ...props }, forwardedRef) => {
-  const { form, testId, variant = "default" } = useFormContext(FORM_CONTENT_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  const localRef = useRef7(null);
-  const mergedRef = useMergeRefs([
-    forwardedRef,
-    localRef
-  ]);
-  useKeyHandler(localRef, form);
-  return /* @__PURE__ */ React25.createElement("div", {
-    ...composableProps(props, {
-      role: "form",
-      classNames: mx6(withColumn.center(), "flex flex-col w-full dx-document", styles3.content())
-    }),
-    "data-testid": testId,
-    ref: mergedRef
-  }, children);
-});
-FormContent.displayName = FORM_CONTENT_NAME;
-var FORM_FIELDSET_NAME2 = "Form.FieldSet";
-var FormFieldSetController = ({ classNames, ...props }) => {
-  const { form, variant = "default", ...contextProps } = useFormContext(FORM_FIELDSET_NAME2);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  return /* @__PURE__ */ React25.createElement(FormFieldSet, {
-    schema: form.schema,
-    classNames: styles3.fieldSet({
-      class: classNames
-    }),
-    ...contextProps,
-    ...props
-  });
-};
-FormFieldSetController.displayName = FORM_FIELDSET_NAME2;
-var FORM_LAYOUT_NAME2 = "Form.Layout";
-var FormLayoutController = ({ schema, ...props }) => {
-  const { form, ...contextProps } = useFormContext(FORM_LAYOUT_NAME2);
-  const resolvedSchema = schema ?? form.schema;
-  if (!resolvedSchema) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(FormLayout, {
-    schema: resolvedSchema,
-    ...contextProps,
-    ...props
-  });
-};
-FormLayoutController.displayName = FORM_LAYOUT_NAME2;
-var FORM_ACTIONS_NAME = "Form.Actions";
-var FormActions = ({ classNames }) => {
-  const { t } = useTranslation10(translationKey10);
-  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
-  if (readonly || layout === "static") {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement("div", {
-    className: mx6(withColumn.center(), formTheme.styles().actions(), classNames)
-  }, onCancel && /* @__PURE__ */ React25.createElement(IconButton5, {
-    icon: "ph--x--regular",
-    iconEnd: true,
-    label: t("cancel-button.label"),
-    onClick: onCancel,
-    "data-testid": "cancel-button"
-  }), onSave && /* @__PURE__ */ React25.createElement(IconButton5, {
-    type: "submit",
-    variant: "primary",
-    disabled: !canSave,
-    icon: "ph--check--regular",
-    iconEnd: true,
-    label: t("save-button.label"),
-    onClick: onSave,
-    "data-testid": "save-button"
-  }));
-};
-FormActions.displayName = FORM_ACTIONS_NAME;
-var FORM_SECTION_NAME = "Form.Section";
-var FormSection = composable(({ children, title, description, ...props }, forwardedRef) => {
-  const { variant = "default" } = useFormContext(FORM_SECTION_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  return /* @__PURE__ */ React25.createElement("div", {
-    ...composableProps(props, {
-      classNames: styles3.section()
-    }),
-    ref: forwardedRef
-  }, (title || description) && /* @__PURE__ */ React25.createElement("div", {
-    className: styles3.sectionHeader()
-  }, title && /* @__PURE__ */ React25.createElement("h2", {
-    className: styles3.sectionTitle()
-  }, title), description && /* @__PURE__ */ React25.createElement(MarkdownView, {
-    classNames: styles3.sectionDescription(),
-    content: description
-  })), children);
-});
-FormSection.displayName = FORM_SECTION_NAME;
-var FORM_GROUP_NAME = "Form.Group";
-var FormGroup = composable(({ children, ...props }, forwardedRef) => {
-  const { variant = "default" } = useFormContext(FORM_SECTION_NAME);
-  const styles3 = formTheme.styles({
-    variant
-  });
-  return /* @__PURE__ */ React25.createElement("div", {
-    ...composableProps(props, {
-      classNames: styles3.group()
-    }),
-    ref: forwardedRef
-  }, children);
-});
-FormGroup.displayName = FORM_GROUP_NAME;
-var FORM_SUBMIT_NAME = "Form.Submit";
-var FormSubmit = ({ classNames, label, icon, disabled }) => {
-  const { t } = useTranslation10(translationKey10);
-  const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
-  if (readonly || layout === "static") {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement("div", {
-    className: mx6(formTheme.styles().submit(), classNames)
-  }, /* @__PURE__ */ React25.createElement(IconButton5, {
-    classNames: "w-full",
-    type: "submit",
-    variant: "primary",
-    disabled: disabled ?? !canSave,
-    icon: icon ?? "ph--check--regular",
-    label: label ?? t("save-button.label"),
-    onClick: onSave,
-    "data-testid": "save-button"
-  }));
-};
-FormSubmit.displayName = FORM_SUBMIT_NAME;
-var FORM_ERROR_NAME = "Form.Error";
-var FormError = ({ children, classNames }) => {
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(Input14.Root, {
-    validationValence: "error"
-  }, /* @__PURE__ */ React25.createElement(Input14.Validation, {
-    classNames
-  }, children));
-};
-FormError.displayName = FORM_ERROR_NAME;
-
-// src/components/Form/Form.tsx
-var Form = {
-  Root: FormRoot,
-  Viewport: FormViewport,
-  Content: FormContent,
-  Section: FormSection,
-  Group: FormGroup,
-  FieldSet: FormFieldSetController,
-  Layout: FormLayoutController,
-  Label: FormFieldLabel,
-  Row: FormRow,
-  Actions: FormActions,
-  Submit: FormSubmit,
-  Error: FormError
-};
-
-// src/components/FieldEditor/FieldEditor.tsx
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
-  const { t } = useTranslation11(translationKey11);
-  const [props, setProps] = useState10(projection.getFieldProjection(field.id).props);
-  useEffect9(() => setProps(projection.getFieldProjection(field.id).props), [
-    field,
-    projection
-  ]);
-  const [schemas, setSchemas] = useState10([]);
-  useAsyncEffect(async () => {
-    if (!registry) {
-      return;
-    }
-    const subscription = registry.query(Filter2.type(Type4.Type)).subscribe((query) => setSchemas(query.results), {
-      fire: true
-    });
-    const schemas2 = await registry.query(Filter2.type(Type4.Type)).run();
-    setSchemas(schemas2);
-    return () => subscription?.();
-  }, [
-    registry
-  ]);
-  const [referenceSchema, setReferenceSchema] = useState10();
-  useEffect9(() => {
-    setReferenceSchema(() => schemas.find((schema) => Type4.getTypename(schema) === props?.referenceSchema));
-  }, [
-    schemas,
-    props?.referenceSchema
-  ]);
-  const [{ fieldSchema }, setFieldSchema] = useState10({
-    fieldSchema: getFormatSchema(props?.format)
-  });
-  const fieldMap = useMemo13(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React26.createElement(SelectField, {
-      ...props2,
-      options: FormatEnums.filter((value3) => value3 !== Format6.TypeFormat.None).map((value3) => ({
-        value: value3,
-        label: t(`format.${value3}.label`)
-      }))
-    }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React26.createElement(SelectField, {
-      ...props2,
-      options: schemas.map((schema) => Type4.getTypename(schema)).filter((typename) => typename != null).map((typename) => ({
-        value: typename
-      }))
-    }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React26.createElement(SelectField, {
-      ...props2,
-      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__ */ React26.createElement(SelectOptionField, props2)
-  }), [
-    t,
-    schemas,
-    referenceSchema
-  ]);
-  const propIsNotType = useCallback18((props2) => props2.filter((prop) => prop.name !== "type"), []);
-  const handleValuesChanged = useCallback18((_props) => {
-    setFieldSchema((prev) => {
-      const fieldSchema2 = getFormatSchema(_props.format);
-      if (prev.fieldSchema === fieldSchema2) {
-        return prev;
-      }
-      return {
-        fieldSchema: fieldSchema2
-      };
-    });
-    setReferenceSchema((prev) => {
-      if (_props.referenceSchema !== (prev ? Type4.getTypename(prev) : void 0)) {
-        const newSchema = schemas.find((schema) => Type4.getTypename(schema) === _props.referenceSchema);
-        if (newSchema) {
-          return newSchema;
-        }
-      }
-      return prev;
-    });
-    setProps((props2) => {
-      const type = formatToType[_props.format];
-      const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
-      if (props2.type !== type) {
-        return {
-          ...props2,
-          ..._props,
-          ...additionalProps,
-          type
-        };
-      }
-      return _props;
-    });
-  }, [
-    schemas,
-    props.format,
-    props.referenceSchema
-  ]);
-  const handleValidate = useCallback18(({ property }) => {
-    if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
-      return [
-        {
-          path: "property",
-          message: `property is not unique: '${property}'`
-        }
-      ];
-    }
-  }, [
-    projection.getFields(),
-    field
-  ]);
-  const handleSave = useCallback18((props2) => {
-    if (view) {
-      Obj3.update(view, () => {
-        projection.setFieldProjection({
-          field,
-          props: props2
-        });
-      });
-    } else {
-      projection.setFieldProjection({
-        field,
-        props: props2
-      });
-    }
-    onSave();
-  }, [
-    projection,
-    field,
-    view,
-    onSave
-  ]);
-  const handleCancel = useCallback18(() => {
-    onSave();
-    requestAnimationFrame(() => onCancel?.());
-  }, [
-    onSave
-  ]);
-  if (!fieldSchema) {
-    log3.warn("invalid format", {
-      props
-    }, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 159, S: void 0 });
-    return null;
-  }
-  return /* @__PURE__ */ React26.createElement(Form.Root, {
-    key: field.id,
-    fieldMap,
-    autoFocus: true,
-    readonly,
-    schema: fieldSchema,
-    values: props,
-    filter: propIsNotType,
-    sort: [
-      "property",
-      "format"
-    ],
-    onValuesChanged: handleValuesChanged,
-    onValidate: handleValidate,
-    onSave: handleSave,
-    onCancel: handleCancel
-  }, /* @__PURE__ */ React26.createElement(Form.Content, null, /* @__PURE__ */ React26.createElement(Form.FieldSet, null), /* @__PURE__ */ React26.createElement(Form.Actions, null)));
-};
-
-// src/components/ObjectForm/ObjectForm.tsx
-import React27, { useCallback as useCallback19, useMemo as useMemo14 } from "react";
-import { Obj as Obj4, Ref as Ref7, Tag as Tag3, Type as Type5 } from "@dxos/echo";
-import { SchemaEx as SchemaEx11 } from "@dxos/effect";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
-import { translationKey as translationKey12 } from "#translations";
-var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectForm/ObjectForm.tsx";
-var ObjectForm = ({ object, type }) => {
-  const db = Obj4.getDatabase(object);
-  const meta = Obj4.getMeta(object);
-  const tags = [
-    ...meta.tags
-  ];
-  const values = useMemo14(() => ({
-    [META_TAGS_KEY]: tags,
-    ...object
-  }), [
-    object,
-    tags
-  ]);
-  const formSchema = useMemo14(() => withMetaTags(Type5.getSchema(type)), [
-    type
-  ]);
-  const handleCreate = useCallback19((type2, values2) => {
-    invariant2(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 29, S: void 0, A: ["db", ""] });
-    invariant2(Type5.isObject(type2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 30, S: void 0, A: ["Type.isObject(type)", ""] });
-    const newObject = db.add(Obj4.make(type2, values2));
-    if (Obj4.instanceOf(Tag3.Tag, newObject)) {
-      Obj4.update(object, (object2) => {
-        Obj4.getMeta(object2).tags = [
-          ...Obj4.getMeta(object2).tags,
-          Ref7.make(newObject)
-        ];
-      });
-    }
-  }, []);
-  const handleChange = useCallback19(({ [META_TAGS_KEY]: metaTags, ...values2 }, { isValid, changed }) => {
-    if (!isValid) {
-      return;
-    }
-    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
-    const hasTagsChange = changedPaths.some((path) => SchemaEx11.splitJsonPath(path)[0] === META_TAGS_KEY);
-    if (hasTagsChange) {
-      Obj4.update(object, (object2) => {
-        Obj4.getMeta(object2).tags = Array.isArray(metaTags) ? [
-          ...metaTags
-        ] : [];
-      });
-    }
-    const nonTagPaths = changedPaths.filter((path) => SchemaEx11.splitJsonPath(path)[0] !== META_TAGS_KEY);
-    if (nonTagPaths.length > 0) {
-      Obj4.update(object, () => {
-        for (const path of nonTagPaths) {
-          const parts = SchemaEx11.splitJsonPath(path);
-          const value3 = Obj4.getValue(values2, parts);
-          Obj4.setValue(object, parts, value3);
-        }
-      });
-    }
-  }, [
-    object
-  ]);
-  return /* @__PURE__ */ React27.createElement(Form.Root, {
-    schema: formSchema,
-    defaultValues: values,
-    createTypename: Type5.getTypename(Tag3.Tag),
-    createOptionIcon: "ph--plus--regular",
-    createOptionLabel: [
-      "add-tag.label",
-      {
-        ns: translationKey12
-      }
-    ],
-    createInitialValuePath: "label",
-    createFieldMap,
-    db,
-    onValuesChanged: handleChange,
-    onCreate: handleCreate
-  }, /* @__PURE__ */ React27.createElement(Form.Viewport, null, /* @__PURE__ */ React27.createElement(Form.Content, null, /* @__PURE__ */ React27.createElement(Form.FieldSet, null))));
-};
-var createFieldMap = {
-  hue: ({ type, label, presentation, getValue, onValueChange }) => {
-    const handleChange = useCallback19((nextHue) => onValueChange(type, nextHue), [
-      onValueChange,
-      type
-    ]);
-    const handleReset = useCallback19(() => onValueChange(type, void 0), [
-      onValueChange,
-      type
-    ]);
-    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, presentation !== "inline" && /* @__PURE__ */ React27.createElement(Form.Label, {
-      label
-    }), /* @__PURE__ */ React27.createElement(HuePicker2, {
-      value: getValue(),
-      onChange: handleChange,
-      onReset: handleReset
-    }));
-  }
-};
-
-// src/components/ObjectProperties/ObjectProperties.tsx
-import * as Function from "effect/Function";
-import * as Option8 from "effect/Option";
-import React28, { useCallback as useCallback20, useMemo as useMemo15 } from "react";
-import { Obj as Obj5, Tag as Tag4, Type as Type6 } from "@dxos/echo";
-import { useType } from "@dxos/echo-react";
-import { SchemaEx as SchemaEx12 } from "@dxos/effect";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
-import { HuePicker as HuePicker3 } from "@dxos/react-ui-pickers";
-import { FactoryAnnotation } from "@dxos/schema";
-import { translationKey as translationKey13 } from "#translations";
-var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectProperties/ObjectProperties.tsx";
-var ObjectProperties = composable2(({ children, object, getCreateDefaults, resolveCreateEntry, ...props }, forwardedRef) => {
-  const db = Obj5.getDatabase(object);
-  const meta = Obj5.getMeta(object);
-  const tags = [
-    ...meta.tags
-  ];
-  const values = useMemo15(() => ({
-    [META_TAGS_KEY]: tags,
-    ...object
-  }), [
-    object,
-    tags
-  ]);
-  const typeUri = Obj5.getTypeURI(object);
-  const typeFromRegistry = useType(db, typeUri);
-  const type = Obj5.getType(object) ?? typeFromRegistry;
-  const formSchema = useMemo15(() => {
-    return Function.pipe(type, Option8.fromNullable, Option8.map((type2) => Type6.getSchema(type2)), Option8.map((schema) => withMetaTags(schema)), Option8.getOrUndefined);
-  }, [
-    type
-  ]);
-  const handleCreate = useCallback20((type2, values2) => {
-    invariant3(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 52, S: void 0, A: ["db", ""] });
-    invariant3(Type6.isObject(type2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 53, S: void 0, A: ["Type.isObject(type)", ""] });
-    const factory = Option8.getOrUndefined(FactoryAnnotation.get(Type6.getSchema(type2)));
-    const newObject = factory ? factory(values2) : Obj5.make(type2, values2);
-    return db.add(newObject);
-  }, [
-    db
-  ]);
-  const handleChange = useCallback20(({ [META_TAGS_KEY]: metaTags, ...values2 }, { isValid, changed }) => {
-    if (!isValid) {
-      return;
-    }
-    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
-    const hasTagsChange = changedPaths.some((path) => SchemaEx12.splitJsonPath(path)[0] === META_TAGS_KEY);
-    if (hasTagsChange) {
-      Obj5.update(object, (object2) => {
-        Obj5.getMeta(object2).tags = Array.isArray(metaTags) ? [
-          ...metaTags
-        ] : [];
-      });
-    }
-    const nonTagPaths = changedPaths.filter((path) => SchemaEx12.splitJsonPath(path)[0] !== META_TAGS_KEY);
-    if (nonTagPaths.length > 0) {
-      Obj5.update(object, () => {
-        for (const path of nonTagPaths) {
-          const parts = SchemaEx12.splitJsonPath(path);
-          const value3 = Obj5.getValue(values2, parts);
-          Obj5.setValue(object, parts, value3);
-        }
-      });
-    }
-  }, [
-    object
-  ]);
-  if (!formSchema) {
-    return null;
-  }
-  return /* @__PURE__ */ React28.createElement(Form.Root, {
-    db,
-    schema: formSchema,
-    defaultValues: values,
-    createTypename: Type6.getTypename(Tag4.Tag),
-    createOptionIcon: "ph--plus--regular",
-    createOptionLabel: [
-      "add-tag.label",
-      {
-        ns: translationKey13
-      }
-    ],
-    createInitialValuePath: "label",
-    createFieldMap: createFieldMap2,
-    onValuesChanged: handleChange,
-    onCreate: handleCreate,
-    getCreateDefaults,
-    resolveCreateEntry
-  }, /* @__PURE__ */ React28.createElement(Form.Viewport, {
-    ...composableProps2(props),
-    scroll: true,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(Form.Content, null, /* @__PURE__ */ React28.createElement(Form.FieldSet, null), /* @__PURE__ */ React28.createElement(Form.Section, null, children))));
-});
-var createFieldMap2 = {
-  hue: ({ type, label, presentation, getValue, onValueChange }) => {
-    const handleChange = useCallback20((nextHue) => onValueChange(type, nextHue), [
-      onValueChange,
-      type
-    ]);
-    const handleReset = useCallback20(() => onValueChange(type, void 0), [
-      onValueChange,
-      type
-    ]);
-    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, presentation !== "inline" && /* @__PURE__ */ React28.createElement(Form.Label, {
-      label
-    }), /* @__PURE__ */ React28.createElement(HuePicker3, {
-      value: getValue(),
-      onChange: handleChange,
-      onReset: handleReset
-    }));
-  }
-};
-
-// src/components/ObjectTree/ObjectTree.tsx
-import * as SchemaAST8 from "effect/SchemaAST";
-import React29 from "react";
-import { composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
-import { mx as mx7 } from "@dxos/ui-theme";
-var ObjectTreeImpl = composable3(({ schema, value: value3, ...props }, forwardedRef) => /* @__PURE__ */ React29.createElement("div", {
-  ...composableProps3(props, {
-    role: "table",
-    classNames: "font-mono text-sm w-full"
-  }),
-  ref: forwardedRef
-}, /* @__PURE__ */ React29.createElement(Node, {
-  ast: schema.ast,
-  value: value3,
-  label: null,
-  depth: 0
-})));
-ObjectTreeImpl.displayName = "ObjectTree";
-var ObjectTree = ObjectTreeImpl;
-var unwrap = (ast) => {
-  if (SchemaAST8.isRefinement(ast)) {
-    return unwrap(ast.from);
-  }
-  if (SchemaAST8.isSuspend(ast)) {
-    return unwrap(ast.f());
-  }
-  if (SchemaAST8.isTransformation(ast)) {
-    return unwrap(ast.from);
-  }
-  return ast;
-};
-var stripOptional = (ast) => {
-  if (!SchemaAST8.isUnion(ast)) {
-    return ast;
-  }
-  const nonUndef = ast.types.filter((t) => !SchemaAST8.isUndefinedKeyword(t));
-  return nonUndef.length === 1 ? nonUndef[0] : ast;
-};
-var Node = ({ ast, value: value3, label, depth }) => {
-  const inner = unwrap(stripOptional(ast));
-  if (SchemaAST8.isTypeLiteral(inner) && isPlainObject(value3)) {
-    const childDepth = label === null ? depth : depth + 1;
-    return /* @__PURE__ */ React29.createElement(React29.Fragment, null, label !== null && /* @__PURE__ */ React29.createElement(Row, {
-      label,
-      value: null,
-      depth,
-      kind: "group"
-    }), inner.propertySignatures.map((prop) => /* @__PURE__ */ React29.createElement(Node, {
-      key: String(prop.name),
-      ast: prop.type,
-      value: value3[String(prop.name)],
-      label: String(prop.name),
-      depth: childDepth
-    })));
-  }
-  if (SchemaAST8.isTupleType(inner) && Array.isArray(value3)) {
-    const elemType = inner.rest[0]?.type;
-    return /* @__PURE__ */ React29.createElement(React29.Fragment, null, label !== null && /* @__PURE__ */ React29.createElement(Row, {
-      label,
-      value: `Array(${value3.length})`,
-      depth,
-      kind: "group"
-    }), value3.map((item, index) => /* @__PURE__ */ React29.createElement(Node, {
-      key: index,
-      ast: elemType ?? SchemaAST8.unknownKeyword,
-      value: item,
-      label: `[${index}]`,
-      depth: depth + 1
-    })));
-  }
-  return /* @__PURE__ */ React29.createElement(Row, {
-    label: label ?? "",
-    value: formatLeaf(value3),
-    depth,
-    kind: "leaf"
-  });
-};
-var Row = ({ label, value: value3, depth }) => /* @__PURE__ */ React29.createElement("div", {
-  role: "row",
-  className: mx7("flex items-baseline gap-3 py-1"),
-  style: {
-    paddingInlineStart: 8 + depth * 16
-  }
-}, /* @__PURE__ */ React29.createElement("div", {
-  role: "cell",
-  className: "text-subdued"
-}, label), /* @__PURE__ */ React29.createElement("div", {
-  role: "cell",
-  className: mx7("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__ */ React29.createElement("span", {
-      className: "text-description"
-    }, "null");
-  }
-  switch (typeof value3) {
-    case "string":
-      return /* @__PURE__ */ React29.createElement("span", {
-        className: "text-blue-text"
-      }, JSON.stringify(value3));
-    case "number":
-    case "bigint":
-      return /* @__PURE__ */ React29.createElement("span", {
-        className: "text-green-text"
-      }, String(value3));
-    case "boolean":
-      return /* @__PURE__ */ React29.createElement("span", {
-        className: "text-purple-text"
-      }, String(value3));
-    default:
-      try {
-        return JSON.stringify(value3);
-      } catch {
-        return String(value3);
-      }
-  }
-};
-
-// src/components/RefEditor/RefEditor.tsx
-import { Prec } from "@codemirror/state";
-import React30, { forwardRef as forwardRef2, useCallback as useCallback21, useEffect as useEffect10, useMemo as useMemo16, useRef as useRef8 } from "react";
-import { Filter as Filter3, Obj as Obj6 } from "@dxos/echo";
-import { useQuery as useQuery2 } from "@dxos/react-client/echo";
-import { useThemeContext, useTranslation as useTranslation12 } from "@dxos/react-ui";
-import { Editor as Editor2 } from "@dxos/react-ui-editor";
-import { createBasicExtensions, createThemeExtensions, insertAtCursor, keymap } from "@dxos/ui-editor";
-import { getHashHue as getHashHue2 } from "@dxos/ui-theme";
-import { translationKey as translationKey14 } from "#translations";
-
-// src/components/RefEditor/ref-editor-extension.ts
-import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView, WidgetType } from "@codemirror/view";
-import { Domino } from "@dxos/ui";
-import { getHashHue, getStyles as getStyles2, mx as mx8 } from "@dxos/ui-theme";
-var REF_REGEX = /^@([A-Za-z0-9]+)$/;
-var EMAIL_REGEX = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
-var NAME_ADDR_REGEX = /^(.*?)\s*<([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,})>$/;
-var formatMailbox = (name, email) => name ? `${name} <${email}>` : email;
-var refEditorRedecorate = StateEffect.define();
-var refEditor = ({ mode = "ref", getRef, match: match2 } = {}) => {
-  const buildRefDecorations = (state) => {
-    const deco = new RangeSetBuilder();
-    const text = state.doc.toString();
-    const tokenRegex = /\S+/g;
-    let tokenMatch;
-    while (tokenMatch = tokenRegex.exec(text)) {
-      const token = tokenMatch[0];
-      const from = tokenMatch.index;
-      const to = from + token.length;
-      const refMatch = token.match(REF_REGEX);
-      if (refMatch) {
-        const ref = getRef?.(refMatch[1]);
-        if (ref) {
-          deco.add(from, to, Decoration.widget({
-            widget: new RefWidget(ref.label, ref.hue ?? getHashHue(refMatch[1])),
-            atomic: true
-          }));
-        }
-        continue;
-      }
-      if (match2?.test(token)) {
-        deco.add(from, to, Decoration.widget({
-          widget: new TokenWidget(token),
-          atomic: true
-        }));
-      }
-    }
-    return deco.finish();
-  };
-  const buildEmailDecorations = (state) => {
-    const addrRegex = match2 ?? EMAIL_REGEX;
-    const deco = new RangeSetBuilder();
-    const text = state.doc.toString();
-    const segmentRegex = /[^,]+(?:,\s*)?|,\s*/g;
-    let segmentMatch;
-    while (segmentMatch = segmentRegex.exec(text)) {
-      const segment = segmentMatch[0];
-      const commaIndex = segment.indexOf(",");
-      const content = (commaIndex === -1 ? segment : segment.slice(0, commaIndex)).trim();
-      if (!content) {
-        continue;
-      }
-      const leading = segment.length - segment.trimStart().length;
-      const from = segmentMatch.index + leading;
-      const to = segmentMatch.index + segment.length;
-      const nameAddr = content.match(NAME_ADDR_REGEX);
-      if (nameAddr) {
-        deco.add(from, to, Decoration.widget({
-          widget: new RefWidget(nameAddr[1] || nameAddr[2], getHashHue(nameAddr[2])),
-          atomic: true
-        }));
-      } else if (addrRegex.test(content)) {
-        deco.add(from, to, Decoration.widget({
-          widget: new TokenWidget(content),
-          atomic: true
-        }));
-      }
-    }
-    return deco.finish();
-  };
-  const buildDecorations = mode === "email" ? buildEmailDecorations : buildRefDecorations;
-  return [
-    styles2,
-    StateField.define({
-      create: (state) => buildDecorations(state),
-      update: (deco, tr) => {
-        if (tr.docChanged || tr.effects.some((effect) => effect.is(refEditorRedecorate))) {
-          return buildDecorations(tr.state);
-        }
-        return deco;
-      },
-      provide: (field) => [
-        EditorView.decorations.from(field),
-        EditorView.atomicRanges.of((view) => {
-          const builder = new RangeSetBuilder();
-          const cursor = view.state.field(field).iter();
-          while (cursor.value) {
-            if (cursor.value.spec.atomic) {
-              builder.add(cursor.from, cursor.to, cursor.value);
-            }
-            cursor.next();
-          }
-          return builder.finish();
-        })
-      ]
-    })
-  ];
-};
-var lineHeight = "30px";
-var container = (classNames, ...children) => {
-  const inner = Domino.of("span").classNames(mx8("inline-flex h-[26px] border rounded-xs", classNames)).append(...children);
-  return Domino.of("span").classNames("inline-flex h-[28px] align-middle").append(inner).root;
-};
-var RefWidget = class extends WidgetType {
-  _label;
-  _hue;
-  constructor(_label, _hue) {
-    super(), this._label = _label, this._hue = _hue;
-  }
-  eq(other) {
-    return this._label === other._label && this._hue === other._hue;
-  }
-  toDOM() {
-    const { bg: fill, border, surface } = getStyles2(this._hue);
-    return container(border, Domino.of("span").classNames(mx8("flex items-center px-1 text-black text-xs", fill)).text("@"), Domino.of("span").classNames(mx8("flex items-center px-1 text-subdued text-sm rounded-r-[3px]", surface)).text(this._label));
-  }
-};
-var TokenWidget = class extends WidgetType {
-  _token;
-  constructor(_token) {
-    super(), this._token = _token;
-  }
-  eq(other) {
-    return this._token === other._token;
-  }
-  toDOM() {
-    return container("border-separator", Domino.of("span").classNames("flex items-center px-1 text-subdued text-sm").text(this._token));
-  }
-};
-var styles2 = EditorView.theme({
-  ".cm-line": {
-    lineHeight
-  },
-  // Match the standard Input block size (md density): 2.5rem, 2rem on pointer-fine devices.
-  ".cm-scroller": {
-    alignItems: "center",
-    minHeight: "2.5rem"
-  },
-  "@media (pointer: fine)": {
-    ".cm-scroller": {
-      minHeight: "2rem"
-    }
-  }
-});
-
-// src/components/RefEditor/RefEditor.tsx
-var RefEditor = /* @__PURE__ */ forwardRef2(({ db, type, value: value3, readonly, mode = "ref", match: match2, getLabel, getValues, icon = "ph--link--regular", placeholder: placeholderProp, activateOnTyping, numItems = 8, ...props }, forwardedRef) => {
-  const { t } = useTranslation12(translationKey14);
-  const { themeMode } = useThemeContext();
-  const getObjectLabel = useCallback21((object) => getLabel?.(object) ?? Obj6.getLabel(object) ?? object.id, [
-    getLabel
-  ]);
-  const filter = useMemo16(() => Filter3.type(type), [
-    type
-  ]);
-  const objects = useQuery2(db, filter);
-  const refs = useMemo16(() => new Map(objects.map((object) => [
-    object.id,
-    {
-      label: getObjectLabel(object),
-      hue: getHashHue2(object.id)
-    }
-  ])), [
-    objects,
-    getObjectLabel
-  ]);
-  const refsRef = useRef8(refs);
-  refsRef.current = refs;
-  const controllerRef = useRef8(null);
-  const composedRef = useCallback21((controller) => {
-    controllerRef.current = controller;
-    if (typeof forwardedRef === "function") {
-      forwardedRef(controller);
-    } else if (forwardedRef) {
-      forwardedRef.current = controller;
-    }
-  }, [
-    forwardedRef
-  ]);
-  useEffect10(() => {
-    controllerRef.current?.view?.dispatch({
-      effects: refEditorRedecorate.of(null)
-    });
-  }, [
-    refs
-  ]);
-  const getMenu = useCallback21(async ({ text }) => {
-    const query = (text ?? "").replace(/^@/, "").toLowerCase();
-    const matchesQuery = (object) => !query || getObjectLabel(object).toLowerCase().includes(query) || (getValues?.(object) ?? []).some((entry) => entry.toLowerCase().includes(query));
-    if (mode === "email") {
-      const mailboxes = objects.flatMap((object) => (getValues?.(object) ?? []).map((entry) => ({
-        object,
-        entry
-      }))).filter(({ object, entry }) => !query || getObjectLabel(object).toLowerCase().includes(query) || entry.toLowerCase().includes(query));
-      return [
-        {
-          id: "mailboxes",
-          items: mailboxes.slice(0, numItems * 2).map(({ object, entry }) => ({
-            id: `${object.id}-${entry}`,
-            label: `${getObjectLabel(object)} (${entry})`,
-            icon,
-            onSelect: ({ view, head }) => insertMailbox(view, head, formatMailbox(getObjectLabel(object), entry))
-          }))
-        }
-      ];
-    }
-    return [
-      {
-        id: "refs",
-        items: objects.filter(matchesQuery).slice(0, numItems * 2).map((object) => {
-          const label = getObjectLabel(object);
-          const detail = getValues?.(object)?.[0];
-          return {
-            id: object.id,
-            label: detail && detail !== label ? `${label} (${detail})` : label,
-            icon,
-            onSelect: ({ view, head }) => insertAtCursor(view, head, `@${object.id} `)
-          };
-        })
-      }
-    ];
-  }, [
-    objects,
-    numItems,
-    mode,
-    icon,
-    getObjectLabel,
-    getValues
-  ]);
-  const placeholder = useMemo16(() => ({
-    content: placeholderProp ?? t(activateOnTyping ? "ref-editor-auto.placeholder" : "ref-editor.placeholder"),
-    focusOnly: false
-  }), [
-    t,
-    placeholderProp,
-    activateOnTyping
-  ]);
-  const extensions = useMemo16(() => [
-    createBasicExtensions({
-      readOnly: readonly,
-      lineWrapping: false
-    }),
-    createThemeExtensions({
-      themeMode,
-      slots: {
-        scroller: {
-          className: "scrollbar-none"
-        }
-      }
-    }),
-    refEditor({
-      mode,
-      match: match2,
-      getRef: (id) => refsRef.current.get(id)
-    }),
-    Prec.highest(keymap.of([
-      {
-        key: "Enter",
-        // Commit the in-progress token when it matches (insert the mode's separator, the
-        // same gesture as typing it); always consume the key (single-line input).
-        run: (view) => {
-          const { head } = view.state.selection.main;
-          const line = view.state.doc.lineAt(head);
-          const before = line.text.slice(0, head - line.from);
-          if (mode === "email") {
-            const segment = before.slice(before.lastIndexOf(",") + 1).trim();
-            if (NAME_ADDR_REGEX.test(segment) || (match2 ?? EMAIL_REGEX).test(segment)) {
-              insertAtCursor(view, head, ", ");
-            }
-          } else {
-            const token = before.slice(before.search(/\S+$/));
-            if (token && match2?.test(token)) {
-              insertAtCursor(view, head, " ");
-            }
-          }
-          return true;
-        }
-      }
-    ]))
-  ], [
-    readonly,
-    themeMode,
-    mode,
-    match2
-  ]);
-  return /* @__PURE__ */ React30.createElement(Editor2.Root, {
-    extensions,
-    numItems,
-    trigger: "@",
-    activateOnTyping,
-    placeholder,
-    // The menu owns its own matching (labels AND values); the built-in label filter would
-    // drop value-matched objects whose label doesn't start with the query.
-    filter: false,
-    getMenu,
-    ref: composedRef
-  }, /* @__PURE__ */ React30.createElement(Editor2.View, {
-    // TOOD(burdon): Use same style as react-ui Input.
-    classNames: "border border-input-separator rounded-xs px-2",
-    ...props,
-    initialValue: value3,
-    selectionEnd: true
-  }));
-});
-RefEditor.displayName = "RefEditor";
-var insertMailbox = (view, head, mailbox) => {
-  const line = view.state.doc.lineAt(head);
-  const before = line.text.slice(0, head - line.from);
-  const lastComma = before.lastIndexOf(",");
-  const from = line.from + (lastComma === -1 ? 0 : lastComma + 1);
-  const insert = `${lastComma === -1 ? "" : " "}${mailbox}, `;
-  view.dispatch({
-    changes: {
-      from,
-      to: head,
-      insert
-    },
-    selection: {
-      anchor: from + insert.length,
-      head: from + insert.length
-    }
-  });
-};
-
-// src/components/ViewEditor/ViewEditor.tsx
-import { RegistryContext } from "@effect-atom/atom-react";
-import * as Match2 from "effect/Match";
-import * as Option9 from "effect/Option";
-import * as Schema5 from "effect/Schema";
-import React31, { forwardRef as forwardRef3, useCallback as useCallback22, useContext, useImperativeHandle, useMemo as useMemo17, useState as useState11 } from "react";
-import { DXN as DXN4, EID as EID2, Entity as Entity2, Feed, Filter as Filter4, Format as Format7, Obj as Obj7, Query as Query2, QueryAST, Ref as Ref8, Type as Type7, View } from "@dxos/echo";
-import { invariant as invariant4 } from "@dxos/invariant";
-import { useObject, useQuery as useQuery3 } from "@dxos/react-client/echo";
-import { Input as Input15, Message, ToggleIconButton as ToggleIconButton3, useTranslation as useTranslation13 } from "@dxos/react-ui";
-import { QueryForm } from "@dxos/react-ui-components";
-import { OrderedList as OrderedList3 } from "@dxos/react-ui-list";
-import { ParentLabelAnnotation, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypeURIFromQuery } from "@dxos/schema";
-import { mx as mx9 } from "@dxos/ui-theme";
-import { translationKey as translationKey15 } from "#translations";
-var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, type, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
-  const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = type == null || Type7.getDatabase(type) == null;
-  const { t } = useTranslation13(translationKey15);
-  const projectionModel = useMemo17(() => {
-    if (!type) {
-      return null;
-    }
-    const jsonSchema = type.jsonSchema;
-    const change = createEchoChangeCallback(view, Type7.getDatabase(type) != null ? type : void 0);
-    const model = new ProjectionModel({
-      registry: atomRegistry,
-      view,
-      baseSchema: jsonSchema,
-      change
-    });
-    return model;
-  }, [
-    atomRegistry,
-    type,
-    view
-  ]);
-  useImperativeHandle(forwardedRef, () => projectionModel, [
-    projectionModel
-  ]);
-  const queueTarget = Match2.value(view.query.ast).pipe(Match2.when({
-    type: "from"
-  }, ({ from }) => {
-    if (from._tag !== "scope") {
-      return void 0;
-    }
-    const feedScope = from.scopes.find((s) => s._tag === "feed");
-    return Option9.fromNullable(feedScope).pipe(Option9.map((s) => s.feedUri), Option9.getOrUndefined);
-  }), Match2.orElse(() => void 0));
-  const feeds = useQuery3(db, Filter4.type(Feed.Feed));
-  const targetRef = useMemo17(() => {
-    if (!queueTarget) {
-      return void 0;
-    }
-    const targetEid = EID2.tryParse(queueTarget);
-    const feed = feeds.find((feed2) => {
-      const feedEid = Feed.getQueueUri(feed2);
-      return feedEid != null && targetEid != null && EID2.equals(feedEid, targetEid);
-    });
-    return feed ? Ref8.fromURI(Entity2.getURI(feed)) : void 0;
-  }, [
-    queueTarget,
-    feeds
-  ]);
-  const viewSchema = useMemo17(() => {
-    const base = Schema5.Struct({
-      query: mode === "schema" ? Format7.URL.annotations({
-        title: "Record type"
-      }) : QueryAST.Query.annotations({
-        title: "Query"
-      })
-    });
-    if (mode === "tag") {
-      return Schema5.Struct({
-        ...base.fields,
-        // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
-        target: Ref8.Ref(Feed.Feed).pipe(Schema5.annotations({
-          title: "Target Feed"
-        }), ParentLabelAnnotation.set(true), Schema5.optional)
-      }).pipe(Schema5.mutable);
-    }
-    return base.pipe(Schema5.mutable);
-  }, [
-    mode
-  ]);
-  const viewValues = useMemo17(() => {
-    const typeUri = getTypeURIFromQuery(view.query.ast);
-    const typeDxn = typeUri ? DXN4.tryMake(typeUri) : void 0;
-    return {
-      query: mode === "schema" ? typeDxn ? DXN4.getName(typeDxn) : typeUri ?? "" : view.query.ast,
-      target: targetRef
-    };
-  }, [
-    mode,
-    view.query.ast,
-    targetRef
-  ]);
-  const fieldMap = useMemo17(() => mode === "tag" ? customFields({
-    types,
-    tags
-  }) : void 0, [
-    mode,
-    types,
-    tags
-  ]);
-  const handleUpdate = useCallback22((values) => {
-    const targetValue = values.target;
-    let queueDxn;
-    if (Ref8.isRef(targetValue)) {
-      const feedUri = targetValue.uri;
-      const feed = feeds.find((feed2) => Obj7.getURI(feed2) === feedUri);
-      if (feed) {
-        queueDxn = Feed.getQueueUri(feed);
-      }
-    }
-    const query = mode === "schema" ? Query2.select(Filter4.type(EID2.isEID(values.query) ? values.query : DXN4.make(values.query))).ast : JSON.parse(JSON.stringify(values.query));
-    onQueryChanged?.(query, queueDxn);
-  }, [
-    onQueryChanged,
-    mode,
-    feeds
-  ]);
-  const handleDelete = useCallback22((fieldId) => {
-    invariant4(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 138, S: void 0, A: ["!readonly", ""] });
-    onDelete?.(fieldId);
-  }, [
-    onDelete,
-    readonly
-  ]);
-  return /* @__PURE__ */ React31.createElement("div", {
-    className: mx9(classNames)
-  }, /* @__PURE__ */ React31.createElement(Form.Root, {
-    schema: viewSchema,
-    values: viewValues,
-    fieldMap,
-    db,
-    onValuesChanged: handleUpdate
-  }, /* @__PURE__ */ React31.createElement(Form.Viewport, null, /* @__PURE__ */ React31.createElement(Form.Content, null, schemaReadonly && !readonly && /* @__PURE__ */ React31.createElement(Message.Root, {
-    valence: "info",
-    classNames: "my-form-padding"
-  }, /* @__PURE__ */ React31.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React31.createElement(Form.FieldSet, null), type && /* @__PURE__ */ React31.createElement(FieldList, {
-    type,
-    view,
-    registry,
-    readonly,
-    showHeading,
-    onDelete: handleDelete
-  })))));
-});
-var customFields = ({ types, tags }) => ({
-  query: ({ type, readonly, label, getValue, onValueChange }) => {
-    const handleChange = useCallback22((query) => onValueChange(type, query.ast), [
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React31.createElement(Input15.Root, null, /* @__PURE__ */ React31.createElement(FormFieldLabel, {
-      readonly,
-      label
-    }), /* @__PURE__ */ React31.createElement(QueryForm, {
-      initialQuery: getValue(),
-      types,
-      tags,
-      onChange: handleChange
-    }));
-  }
-});
-var FieldList = ({ type, view, registry, readonly, showHeading = false, onDelete }) => {
-  const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = Type7.getDatabase(type) == null;
-  const { t } = useTranslation13(translationKey15);
-  const [viewSnapshot] = useObject(view);
-  const projectionModel = useMemo17(() => {
-    const jsonSchema = type.jsonSchema;
-    const change = createEchoChangeCallback(view, Type7.getDatabase(type) != null ? type : void 0);
-    return new ProjectionModel({
-      registry: atomRegistry,
-      view,
-      baseSchema: jsonSchema,
-      change
-    });
-  }, [
-    atomRegistry,
-    type,
-    view
-  ]);
-  const [expandedField, setExpandedField] = useState11();
-  const handleAdd = useCallback22(() => {
-    invariant4(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 204, S: void 0, A: ["!readonly", ""] });
-    const field = projectionModel.createFieldProjection();
-    setExpandedField(field.id);
-  }, [
-    projectionModel,
-    readonly
-  ]);
-  const handleDelete = useCallback22((fieldId) => {
-    invariant4(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 212, S: void 0, A: ["!readonly", ""] });
-    if (fieldId === expandedField) {
-      setExpandedField(void 0);
-    }
-    onDelete?.(fieldId);
-  }, [
-    expandedField,
-    onDelete,
-    readonly
-  ]);
-  const handleMove = useCallback22((fromIndex, toIndex) => {
-    invariant4(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 223, S: void 0, A: ["!readonly", ""] });
-    Obj7.update(view, (view2) => {
-      const fields = [
-        ...view2.projection.fields
-      ];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      view2.projection.fields = fields;
-    });
-  }, [
-    view,
-    readonly
-  ]);
-  const handleClose = useCallback22(() => setExpandedField(void 0), []);
-  const handleHide = useCallback22((fieldId) => {
-    setExpandedField(void 0);
-    projectionModel.hideFieldProjection(fieldId);
-  }, [
-    projectionModel
-  ]);
-  const handleShow = useCallback22((property) => {
-    setExpandedField(void 0);
-    projectionModel.showFieldProjection(property);
-  }, [
-    projectionModel
-  ]);
-  if (!viewSnapshot) {
-    return null;
-  }
-  return /* @__PURE__ */ React31.createElement(OrderedList3.Root, {
-    items: viewSnapshot.projection.fields,
-    isItem: Schema5.is(View.FieldSchema),
-    getId: (field) => field.id,
-    onMove: readonly ? void 0 : handleMove,
-    readonly,
-    expandedId: expandedField,
-    onExpandedChange: setExpandedField
-  }, ({ items: fields }) => /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(FormFieldHeader, {
-    label: t("fields.label"),
-    readonly,
-    add: {
-      label: t("add-property-button.label"),
-      disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
-      onClick: handleAdd
-    }
-  }), showHeading && /* @__PURE__ */ React31.createElement(FormFieldLabel, {
-    standalone: true,
-    classNames: "py-1",
-    label: t("field-path.label")
-  }), /* @__PURE__ */ React31.createElement(OrderedList3.Content, null, fields.map((field) => {
-    const hidden = field.visible === false;
-    return /* @__PURE__ */ React31.createElement(OrderedList3.DetailItem, {
-      key: field.id,
-      id: field.id,
-      item: field,
-      canDrag: !readonly && !schemaReadonly,
-      expandable: !readonly,
-      title: field.path,
-      titleClassNames: hidden ? "text-subdued" : void 0,
-      actions: /* @__PURE__ */ React31.createElement(ToggleIconButton3, {
-        iconOnly: true,
-        variant: "ghost",
-        active: hidden,
-        icon: "ph--eye--regular",
-        activeIcon: "ph--eye-closed--regular",
-        label: t(hidden ? "show-field.label" : "hide-field.label"),
-        "data-testid": hidden ? "show-field-button" : "hide-field-button",
-        disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
-        onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-      }),
-      trailing: !readonly && /* @__PURE__ */ React31.createElement(CompactIconButton, {
-        icon: "ph--x--regular",
-        label: t("delete-field.label"),
-        disabled: schemaReadonly || viewSnapshot.projection.fields.length <= 1,
-        onClick: () => handleDelete(field.id),
-        "data-testid": "field.delete"
-      })
-    }, /* @__PURE__ */ React31.createElement(FieldEditor, {
-      readonly: readonly || schemaReadonly,
-      registry,
-      projection: projectionModel,
-      field,
-      onSave: handleClose
-    }));
-  }))));
-};
-export {
-  ArrayField,
-  AsyncSelectField,
-  AutofillAnnotation,
-  AutofillAnnotationId,
-  AutofillField,
-  BooleanField,
-  ComboboxField,
-  CompactIconButton,
-  DateField,
-  EMAIL_REGEX,
-  FieldEditor,
-  Form,
-  FormContextProvider,
-  FormField,
-  FormFieldErrorBoundary,
-  FormFieldHeader,
-  FormFieldLabel,
-  FormFieldSet,
-  FormFieldSetContainer,
-  FormRow,
-  GeoPointField,
-  InlineRefField,
-  META_TAGS_KEY,
-  MarkdownField,
-  NAME_ADDR_REGEX,
-  NumberField,
-  ObjectForm,
-  ObjectPicker,
-  ObjectProperties,
-  ObjectTree,
-  OptionsLookupAnnotation,
-  OptionsLookupAnnotationId,
-  PasswordField,
-  REF_REGEX,
-  RefEditor,
-  RefField,
-  SelectField,
-  SelectOptionField,
-  TextAreaField,
-  TextField,
-  TupleField,
-  ViewEditor,
-  autofill,
-  cellClassesForFieldType,
-  createSelectField,
-  findRefOption,
-  formatForDisplay,
-  formatForEditing,
-  formatMailbox,
-  getDefaultValue,
-  getFormProperties,
-  getNumericConstraints,
-  getRefProps,
-  getRootFormProperties,
-  omitHiddenFormFields,
-  omitId,
-  optionsLookup,
-  parseValue,
-  pathNotUniqueError,
-  pickValues,
-  presentationFor,
-  refEditor,
-  refEditorRedecorate,
-  useAsyncFieldEffect,
-  useFormContext,
-  useFormFieldState,
-  useFormHandler,
-  useFormValues,
-  useKeyHandler,
-  withMetaTags
-};
-//# sourceMappingURL=index.mjs.map