@dxos/react-ui-form 0.8.4-main.422d1c7879 → 0.8.4-main.51f1e5ca51

package/dist/lib/browser/index.mjs

@@ -1,81 +1,3 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui-form";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "fields.label": "Fields",
-        "hidden-fields.label": "Hidden Fields",
-        "empty-readonly-ref-field.label": "(none)",
-        "field-property.label": "Property",
-        "field-property.placeholder": "Property name",
-        "field-format.label": "Type",
-        "field-path.label": "Field path",
-        "add-item.button": "Add item",
-        "add-property-button.label": "Add property",
-        "boolean-input-true.value": "Yes",
-        "boolean-input-false.value": "No",
-        "show-field.label": "Show field",
-        "hide-field.label": "Hide field",
-        "delete-field.label": "Delete field",
-        "create-option.label": "Create",
-        "add-tag.label": "Add tag",
-        "ref-field-combobox-input.placeholder": "Search\u2026",
-        "ref-field.placeholder": "Select\u2026",
-        "ref-field.placeholder_one": "Select\u2026",
-        "ref-field.placeholder_other": "Select items\u2026",
-        "example.placeholder": "Example",
-        "latitude.placeholder": "Latitude (e.g., 40.7128)",
-        "longitude.placeholder": "Longitude (e.g., -74.0060)",
-        "cancel-button.label": "Cancel",
-        "save-button.label": "Save",
-        "create-text.label": "Create text",
-        // TypeFormat
-        "format.boolean.label": "Boolean",
-        "format.currency.label": "Currency",
-        "format.date.label": "Date",
-        "format.date-time.label": "DateTime",
-        "format.did.label": "DID",
-        "format.duration.label": "Duration",
-        "format.dxn.label": "DXN",
-        "format.email.label": "Email",
-        "format.formula.label": "Formula",
-        "format.hostname.label": "Hostname",
-        "format.integer.label": "Integer",
-        "format.json.label": "JSON",
-        "format.lnglat.label": "Geopoint",
-        "format.markdown.label": "Markdown",
-        "format.percent.label": "Percent",
-        "format.ref.label": "Reference",
-        "format.regex.label": "RegExp",
-        "format.string.label": "String",
-        "format.single-select.label": "Select",
-        "format.multi-select.label": "Multi-select",
-        "format.text.label": "Long text",
-        "format.time.label": "Time",
-        "format.timestamp.label": "Timestamp",
-        "format.user.label": "User",
-        "format.number.label": "Number",
-        "format.uri.label": "URI",
-        "format.url.label": "URL",
-        "format.uuid.label": "UUID",
-        // GeoPointField.
-        "latitude.label": "Latitude",
-        "longitude.label": "Longitude",
-        // SelectOptionsField.
-        "select-option.label": "Label",
-        "select-option-label.placeholder": "Option label",
-        "select-option-delete.button": "Delete",
-        "select-option-add.button": "Add option",
-        // System schema message.
-        "system-schema.title": "System type",
-        "system-schema.description": "System type: cannot add or remove fields.",
-        "remove.button": "Remove"
-      }
-    }
-  }
-];
-
 // src/components/FieldEditor/FieldEditor.tsx
 import React17, { useCallback as useCallback14, useEffect as useEffect5, useMemo as useMemo8, useState as useState6 } from "react";
 import { Obj as Obj3 } from "@dxos/echo";
@@ -83,6 +5,7 @@ import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/interna
 import { log as log2 } from "@dxos/log";
 import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
+import { translationKey as translationKey9 } from "#translations";
 
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
@@ -212,6 +135,9 @@ var detectFieldType = (ast) => {
   if (isLiteralUnion(ast)) {
     return "select";
   }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return "struct";
+  }
   switch (ast._tag) {
     case "BooleanKeyword":
       return "boolean";
@@ -423,6 +349,7 @@ import * as SchemaAST4 from "effect/SchemaAST";
 import React5, { useCallback as useCallback3 } from "react";
 import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
 import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { translationKey as translationKey3 } from "#translations";
 
 // src/components/Form/Form.tsx
 import { createContext } from "@radix-ui/react-context";
@@ -434,6 +361,7 @@ import { Annotation as EchoAnnotation } from "@dxos/echo";
 import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
 import { IconButton, ScrollArea, useMergeRefs, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { composable, composableProps, mx, withColumn } from "@dxos/ui-theme";
+import { translationKey as translationKey2 } from "#translations";
 
 // src/hooks/useFormHandler.ts
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -471,12 +399,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("validate", {
       values: values2,
       errors: errors2
-    }, {
-      F: __dxlog_file,
-      L: 155,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 42, S: void 0 });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -564,12 +487,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("onValueChange", {
       path,
       value: value3
-    }, {
-      F: __dxlog_file,
-      L: 254,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 138, S: void 0 });
     const jsonPath = createJsonPath(path);
     const pathArray = path;
     let parsedValue = value3;
@@ -578,12 +496,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
         parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 264,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 150, S: void 0 });
       parsedValue = void 0;
     }
     const newValues = mergeAtPath(values, pathArray, parsedValue);
@@ -809,6 +722,7 @@ import React2, { useMemo as useMemo2 } from "react";
 import { Format as Format3 } from "@dxos/echo";
 import { createJsonPath as createJsonPath2, findNode, getAnnotation as getAnnotation2, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion as isLiteralUnion2, isNestedType } from "@dxos/effect";
 import { useTranslation } from "@dxos/react-ui";
+import { translationKey } from "#translations";
 var FormField = (props) => {
   const {
     type,
@@ -1141,7 +1055,7 @@ var FormFieldSet2 = (props) => {
 FormFieldSet2.displayName = FORM_FIELDSET_NAME2;
 var FORM_ACTIONS_NAME = "Form.Actions";
 var FormActions = ({ classNames }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
   if (readonly || layout === "static") {
     return null;
@@ -1183,7 +1097,7 @@ var FormSection = composable(({ children, label, description, ...props }, forwar
 FormSection.displayName = FORM_SECTION_NAME;
 var FORM_SUBMIT_NAME = "Form.Submit";
 var FormSubmit = ({ classNames, label, icon, disabled }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
   if (readonly || layout === "static") {
     return null;
@@ -1216,7 +1130,7 @@ var Form = {
 
 // src/components/Form/fields/ArrayField.tsx
 var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
-  const { t } = useTranslation3(translationKey);
+  const { t } = useTranslation3(translationKey3);
   const elementType = getArrayElementType2(type);
   const { onValueChange } = inputProps;
   const values = useFormValues(ArrayField.displayName, path, () => []);
@@ -1346,8 +1260,9 @@ import React7, { useCallback as useCallback5, useEffect as useEffect3, useMemo a
 import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
 import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
+import { translationKey as translationKey4 } from "#translations";
 var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation4(translationKey);
+  const { t } = useTranslation4(translationKey4);
   const { status, error } = getStatus();
   const geoPoint = useMemo5(() => getValue() ?? [
     0,
@@ -1447,6 +1362,7 @@ import { Button, Icon as Icon2, Input as Input4, useTranslation as useTranslatio
 import { Editor, useBasicMarkdownExtensions } from "@dxos/react-ui-editor";
 import { Text } from "@dxos/schema";
 import { createDataExtensions } from "@dxos/ui-editor";
+import { translationKey as translationKey5 } from "#translations";
 var editorClassNames = "transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2";
 var MarkdownField = ({ type, readonly, label, placeholder, layout, db, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus();
@@ -1552,7 +1468,7 @@ var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange })
   }));
 };
 var CreateTextButton = ({ db, disabled, onCreate }) => {
-  const { t } = useTranslation5(translationKey);
+  const { t } = useTranslation5(translationKey5);
   const handleClick = useCallback6(() => {
     if (!db) {
       return;
@@ -1607,13 +1523,15 @@ import { DXN } from "@dxos/keys";
 import { DxAnchor } from "@dxos/lit-ui/react";
 import { Button as Button2, Icon as Icon3, Input as Input6, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { ParentLabelAnnotationId } from "@dxos/schema";
+import { translationKey as translationKey7 } from "#translations";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
 import React10, { forwardRef, useCallback as useCallback8, useState as useState3 } from "react";
 import { Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-search";
+import { translationKey as translationKey6 } from "#translations";
 var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, onSelect, onCreate, ...props }, forwardedRef) => {
-  const { t } = useTranslation6(translationKey);
+  const { t } = useTranslation6(translationKey6);
   const [showForm, setShowForm] = useState3(false);
   const [formInitialValue, setFormInitialValue] = useState3("");
   const { results, handleSearch } = useSearchListResults({
@@ -1684,7 +1602,7 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
   })), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
 var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation6(translationKey);
+  const { t } = useTranslation6(translationKey6);
   const { query } = useSearchListInput();
   const label = createOptionLabel ? t(createOptionLabel[0], {
     ns: createOptionLabel[1].ns,
@@ -1726,7 +1644,7 @@ var defaultGetOptions = (results, { parentLabel } = {}) => results.map((result)
 var defaultUseResults = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj2.Unknown) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
 var RefField = (props) => {
   const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, db, useSchema = defaultUseSchema, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, onValueChange } = props;
-  const { t } = useTranslation7(translationKey);
+  const { t } = useTranslation7(translationKey7);
   const { status, error } = getStatus();
   const typename = useMemo7(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
     type
@@ -1903,8 +1821,9 @@ import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useT
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
 import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
+import { translationKey as translationKey8 } from "#translations";
 var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation8(translationKey);
+  const { t } = useTranslation8(translationKey8);
   const { status, error } = getStatus();
   const [selected, setSelectedId] = useState5(null);
   const [isNewOption, setIsNewOption] = useState5(false);
@@ -2169,7 +2088,7 @@ var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValue
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
-  const { t } = useTranslation9(translationKey);
+  const { t } = useTranslation9(translationKey9);
   const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
   useEffect5(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
@@ -2278,7 +2197,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj3.change(view, () => {
+      Obj3.update(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2306,12 +2225,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
-    }, {
-      F: __dxlog_file2,
-      L: 172,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 156, S: void 0 });
     return null;
   }
   return /* @__PURE__ */ React17.createElement(Form.Root, {
@@ -2341,6 +2255,7 @@ import { splitJsonPath } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
 import { HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
 import { isNonNullable } from "@dxos/util";
+import { translationKey as translationKey10 } from "#translations";
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectForm/ObjectForm.tsx";
 var createFieldMap = {
   hue: ({ type, label, layout, getValue, onValueChange }) => {
@@ -2378,27 +2293,11 @@ var ObjectForm = ({ object, schema }) => {
     schema
   ]);
   const handleCreate = useCallback15((schema2, values2) => {
-    invariant(db, void 0, {
-      F: __dxlog_file3,
-      L: 51,
-      S: void 0,
-      A: [
-        "db",
-        ""
-      ]
-    });
-    invariant(Type2.isObjectSchema(schema2), void 0, {
-      F: __dxlog_file3,
-      L: 52,
-      S: void 0,
-      A: [
-        "Type.isObjectSchema(schema)",
-        ""
-      ]
-    });
+    invariant(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 49, S: void 0, A: ["db", ""] });
+    invariant(Type2.isObjectSchema(schema2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 50, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
     const newObject = db.add(Obj4.make(schema2, values2));
     if (Obj4.instanceOf(Tag2.Tag, newObject)) {
-      Obj4.change(object, (object2) => {
+      Obj4.update(object, (object2) => {
         Obj4.getMeta(object2).tags = [
           ...Obj4.getMeta(object2).tags ?? [],
           Obj4.getDXN(newObject).toString()
@@ -2413,13 +2312,13 @@ var ObjectForm = ({ object, schema }) => {
     const changedPaths = Object.keys(changed).filter((path) => changed[path]);
     const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === "tags");
     if (hasTagsChange) {
-      Obj4.change(object, (object2) => {
+      Obj4.update(object, (object2) => {
         Obj4.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
       });
     }
     const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== "tags");
     if (nonTagPaths.length > 0) {
-      Obj4.change(object, () => {
+      Obj4.update(object, () => {
         for (const path of nonTagPaths) {
           const parts = splitJsonPath(path);
           const value3 = Obj4.getValue(values2, parts);
@@ -2438,7 +2337,7 @@ var ObjectForm = ({ object, schema }) => {
     createOptionLabel: [
       "add-tag.label",
       {
-        ns: translationKey
+        ns: translationKey10
       }
     ],
     createInitialValuePath: "label",
@@ -2461,6 +2360,7 @@ import { HuePicker as HuePicker3 } from "@dxos/react-ui-pickers";
 import { FactoryAnnotation } from "@dxos/schema";
 import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
+import { translationKey as translationKey11 } from "#translations";
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectProperties/ObjectProperties.tsx";
 var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef) => {
   const db = Obj5.getDatabase(object);
@@ -2479,24 +2379,8 @@ var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef
     object
   ]);
   const handleCreate = useCallback16((schema, values2) => {
-    invariant2(db, void 0, {
-      F: __dxlog_file4,
-      L: 52,
-      S: void 0,
-      A: [
-        "db",
-        ""
-      ]
-    });
-    invariant2(Type3.isObjectSchema(schema), void 0, {
-      F: __dxlog_file4,
-      L: 53,
-      S: void 0,
-      A: [
-        "Type.isObjectSchema(schema)",
-        ""
-      ]
-    });
+    invariant2(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 45, S: void 0, A: ["db", ""] });
+    invariant2(Type3.isObjectSchema(schema), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 46, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
     const factory = Option5.getOrUndefined(FactoryAnnotation.get(schema));
     const newObject = factory ? factory(values2) : Obj5.make(schema, values2);
     return db.add(newObject);
@@ -2510,13 +2394,13 @@ var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef
     const changedPaths = Object.keys(changed).filter((path) => changed[path]);
     const hasTagsChange = changedPaths.some((path) => splitJsonPath2(path)[0] === "tags");
     if (hasTagsChange) {
-      Obj5.change(object, (object2) => {
+      Obj5.update(object, (object2) => {
         Obj5.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
       });
     }
     const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== "tags");
     if (nonTagPaths.length > 0) {
-      Obj5.change(object, () => {
+      Obj5.update(object, () => {
         for (const path of nonTagPaths) {
           const parts = splitJsonPath2(path);
           const value3 = Obj5.getValue(values2, parts);
@@ -2538,7 +2422,7 @@ var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef
     createOptionLabel: [
       "add-tag.label",
       {
-        ns: translationKey
+        ns: translationKey11
       }
     ],
     createInitialValuePath: "label",
@@ -2578,6 +2462,7 @@ var BaseSchema = Schema4.Struct({
 import React22 from "react";
 import { ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation11 } from "@dxos/react-ui";
 import { composable as composable3, composableProps as composableProps3, mx as mx4 } from "@dxos/ui-theme";
+import { translationKey as translationKey13 } from "#translations";
 
 // src/components/Settings/SettingsFieldSet.tsx
 import * as SchemaAST5 from "effect/SchemaAST";
@@ -2590,6 +2475,7 @@ import { Input as Input13, Select as Select2 } from "@dxos/react-ui";
 import React20 from "react";
 import { Input as Input12, toLocalizedString, useTranslation as useTranslation10 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/ui-theme";
+import { translationKey as translationKey12 } from "#translations";
 var SETTINGS_PANEL_NAME = "Settings.Panel";
 var SETTINGS_ITEM_NAME = "Settings.Item";
 var SettingsPanel = ({ classNames, children }) => {
@@ -2600,7 +2486,7 @@ var SettingsPanel = ({ classNames, children }) => {
 };
 SettingsPanel.displayName = SETTINGS_PANEL_NAME;
 var SettingsItem = ({ title, description = "", children }) => {
-  const { t } = useTranslation10(translationKey);
+  const { t } = useTranslation10(translationKey12);
   return /* @__PURE__ */ React20.createElement(Input12.Root, null, /* @__PURE__ */ React20.createElement(SettingsPanel, {
     classNames: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0"
   }, /* @__PURE__ */ React20.createElement(Input12.Label, {
@@ -2615,7 +2501,7 @@ var SettingsItem = ({ title, description = "", children }) => {
 SettingsItem.displayName = SETTINGS_ITEM_NAME;
 
 // src/components/Settings/SettingsFieldSet.tsx
-var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, visible, sort }) => {
+var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, visible, sort, pathPrefix = "" }) => {
   const properties = useMemo11(() => {
     const props = getFormProperties(schema.ast);
     if (!sort) {
@@ -2643,21 +2529,27 @@ var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, v
   ]);
   return /* @__PURE__ */ React21.createElement(React21.Fragment, null, properties.map((property) => {
     const name = property.name.toString();
-    if (visible && !visible(name, values)) {
+    const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+    if (visible && !visible(path, values)) {
       return null;
     }
+    const entry = fieldMap?.[name];
     return /* @__PURE__ */ React21.createElement(SettingsFieldItem, {
       key: name,
+      path,
       property,
       value: values[name],
       onChange: (value3) => handleChange(name, value3),
       readonly,
-      customField: fieldMap?.[name]
+      customField: typeof entry === "function" ? entry : void 0,
+      nestedFieldMap: typeof entry === "object" ? entry : void 0,
+      visible,
+      sort
     });
   }));
 };
 SettingsFieldSet.displayName = "Settings.FieldSet";
-var SettingsFieldItem = ({ property, value: value3, onChange, readonly, customField }) => {
+var SettingsFieldItem = ({ property, path, value: value3, onChange, readonly, customField, nestedFieldMap, visible, sort }) => {
   const { type } = property;
   const name = property.name.toString();
   const title = getAnnotation3(SchemaAST5.TitleAnnotationId)(type) ?? String3.capitalize(name);
@@ -2675,6 +2567,19 @@ var SettingsFieldItem = ({ property, value: value3, onChange, readonly, customFi
   }
   const fieldType = detectFieldType(type);
   switch (fieldType) {
+    case "struct":
+      return /* @__PURE__ */ React21.createElement(SettingsFieldSet, {
+        schema: {
+          ast: type
+        },
+        values: value3 ?? {},
+        onValuesChanged: onChange,
+        readonly,
+        fieldMap: nestedFieldMap,
+        visible,
+        sort,
+        pathPrefix: path
+      });
     case "boolean":
       return /* @__PURE__ */ React21.createElement(SettingsItem, {
         title,
@@ -2760,7 +2665,7 @@ var SettingsViewport = composable3(({ children, ...props }, forwardedRef) => {
 });
 SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
 var SettingsSection = ({ title, description, children }) => {
-  const { t } = useTranslation11(translationKey);
+  const { t } = useTranslation11(translationKey13);
   return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("h2", {
     className: "px-trim-md mt-trim-md text-xl"
   }, toLocalizedString2(title, t)), description && /* @__PURE__ */ React22.createElement("p", {
@@ -2779,13 +2684,37 @@ var Settings = {
   FieldSet: SettingsFieldSet
 };
 
+// src/components/Settings/SettingsSelectField.tsx
+import React23 from "react";
+import { Select as Select3 } from "@dxos/react-ui";
+var createSelectField = ({ options, defaultLabel = "Default" }) => {
+  const normalized = options.map((option) => typeof option === "string" ? {
+    value: option,
+    label: option
+  } : option);
+  const hasDefault = defaultLabel !== null;
+  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : "";
+  return ({ value: value3, onChange, readonly }) => /* @__PURE__ */ React23.createElement(Select3.Root, {
+    disabled: readonly,
+    value: value3 ?? sentinel,
+    onValueChange: (next) => onChange(hasDefault && next === sentinel ? void 0 : next)
+  }, /* @__PURE__ */ React23.createElement(Select3.TriggerButton, {
+    disabled: readonly
+  }), /* @__PURE__ */ React23.createElement(Select3.Portal, null, /* @__PURE__ */ React23.createElement(Select3.Content, null, /* @__PURE__ */ React23.createElement(Select3.Viewport, null, hasDefault && /* @__PURE__ */ React23.createElement(Select3.Option, {
+    value: sentinel
+  }, defaultLabel), normalized.map((option) => /* @__PURE__ */ React23.createElement(Select3.Option, {
+    key: option.value,
+    value: option.value
+  }, option.label ?? option.value))), /* @__PURE__ */ React23.createElement(Select3.Arrow, null))));
+};
+
 // src/components/ViewEditor/ViewEditor.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
 import * as Array4 from "effect/Array";
 import * as Match2 from "effect/Match";
 import * as Option6 from "effect/Option";
 import * as Schema5 from "effect/Schema";
-import React23, { forwardRef as forwardRef2, useCallback as useCallback18, useContext, useImperativeHandle, useMemo as useMemo12, useState as useState7 } from "react";
+import React24, { forwardRef as forwardRef2, useCallback as useCallback18, useContext, useImperativeHandle, useMemo as useMemo12, useState as useState7 } from "react";
 import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj6, Query, QueryAST, Ref as Ref6 } from "@dxos/echo";
 import { View } from "@dxos/echo";
 import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
@@ -2796,11 +2725,12 @@ import { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
 import { ParentLabelAnnotation, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
 import { mx as mx5, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+import { translationKey as translationKey14 } from "#translations";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation12(translationKey);
+  const { t } = useTranslation12(translationKey14);
   const projectionModel = useMemo12(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
     const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
@@ -2893,36 +2823,28 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     feeds
   ]);
   const handleDelete = useCallback18((fieldId) => {
-    invariant3(!readonly, void 0, {
-      F: __dxlog_file5,
-      L: 185,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 127, S: void 0, A: ["!readonly", ""] });
     onDelete?.(fieldId);
   }, [
     onDelete,
     readonly
   ]);
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: mx5(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React23.createElement(Message.Root, {
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React24.createElement(Message.Root, {
     valence: "info",
     classNames: "my-form-padding"
-  }, /* @__PURE__ */ React23.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React23.createElement(Form.Root, {
+  }, /* @__PURE__ */ React24.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React24.createElement(Form.Root, {
     schema: viewSchema,
     values: viewValues,
     fieldMap,
     db,
     onValuesChanged: handleUpdate
-  }, /* @__PURE__ */ React23.createElement(Form.FieldSet, null), /* @__PURE__ */ React23.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React24.createElement(Form.FieldSet, null), /* @__PURE__ */ React24.createElement(FormFieldLabel, {
     label: t("fields.label"),
     asChild: true
-  }), /* @__PURE__ */ React23.createElement(FieldList, {
+  }), /* @__PURE__ */ React24.createElement(FieldList, {
     schema,
     view,
     registry,
@@ -2934,7 +2856,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
 var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation12(translationKey);
+  const { t } = useTranslation12(translationKey14);
   const [viewSnapshot] = useObject(view);
   const projectionModel = useMemo12(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
@@ -2953,15 +2875,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   ]);
   const [expandedField, setExpandedField] = useState7();
   const handleAdd = useCallback18(() => {
-    invariant3(!readonly, void 0, {
-      F: __dxlog_file5,
-      L: 250,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 183, S: void 0, A: ["!readonly", ""] });
     const field = projectionModel.createFieldProjection();
     setExpandedField(field.id);
   }, [
@@ -2974,15 +2888,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     readonly
   ]);
   const handleDelete = useCallback18((fieldId) => {
-    invariant3(!readonly, void 0, {
-      F: __dxlog_file5,
-      L: 264,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 196, S: void 0, A: ["!readonly", ""] });
     if (fieldId === expandedField) {
       setExpandedField(void 0);
     }
@@ -2993,16 +2899,8 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     readonly
   ]);
   const handleMove = useCallback18((fromIndex, toIndex) => {
-    invariant3(!readonly, void 0, {
-      F: __dxlog_file5,
-      L: 276,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
-    Obj6.change(view, (view2) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 207, S: void 0, A: ["!readonly", ""] });
+    Obj6.update(view, (view2) => {
       const fields = [
         ...view2.projection.fields
       ];
@@ -3030,46 +2928,46 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   if (!viewSnapshot) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(List2.Root, {
+  return /* @__PURE__ */ React24.createElement(List2.Root, {
     items: viewSnapshot.projection.fields,
     isItem: Schema5.is(View.FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
     readonly
-  }, ({ items: fields }) => /* @__PURE__ */ React23.createElement(React23.Fragment, null, showHeading && /* @__PURE__ */ React23.createElement("h3", {
+  }, ({ items: fields }) => /* @__PURE__ */ React24.createElement(React24.Fragment, null, showHeading && /* @__PURE__ */ React24.createElement("h3", {
     className: "text-sm"
-  }, t("field-path.label")), /* @__PURE__ */ React23.createElement("div", {
+  }, t("field-path.label")), /* @__PURE__ */ React24.createElement("div", {
     role: "list",
     className: "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]"
   }, fields?.map((field) => {
     const hidden = field.visible === false;
-    return /* @__PURE__ */ React23.createElement(List2.Item, {
+    return /* @__PURE__ */ React24.createElement(List2.Item, {
       key: field.id,
       item: field,
       classNames: "grid grid-cols-subgrid col-span-5",
       "aria-expanded": expandedField === field.id
-    }, /* @__PURE__ */ React23.createElement("div", {
+    }, /* @__PURE__ */ React24.createElement("div", {
       role: "none",
       className: mx5(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
-    }, /* @__PURE__ */ React23.createElement(List2.ItemDragHandle, {
+    }, /* @__PURE__ */ React24.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
-    }), /* @__PURE__ */ React23.createElement(List2.ItemTitle, {
+    }), /* @__PURE__ */ React24.createElement(List2.ItemTitle, {
       classNames: hidden && "text-subdued",
       onClick: () => handleToggleField(field)
-    }, field.path), /* @__PURE__ */ React23.createElement(List2.ItemIconButton, {
+    }, field.path), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
       label: t(hidden ? "show field label" : "hide field label"),
       "data-testid": hidden ? "show-field-button" : "hide-field-button",
       icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
       autoHide: false,
       disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
       onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-    }), !readonly && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(List2.ItemDeleteButton, {
+    }), !readonly && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(List2.ItemDeleteButton, {
       label: t("delete-field.label"),
       autoHide: false,
       disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
       onClick: () => handleDelete(field.id),
       "data-testid": "field.delete"
-    }), /* @__PURE__ */ React23.createElement(List2.ItemIconButton, {
+    }), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
       iconOnly: true,
       variant: "ghost",
       label: t("toggle-expand.label", {
@@ -3078,20 +2976,20 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleToggleField(field),
       "data-testid": "field.toggle"
-    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React23.createElement("div", {
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React24.createElement("div", {
       role: "none",
       className: "col-span-full mt-1 mb-1 border border-separator rounded-md"
-    }, /* @__PURE__ */ React23.createElement(FieldEditor, {
+    }, /* @__PURE__ */ React24.createElement(FieldEditor, {
       readonly: readonly || schemaReadonly,
       registry,
       projection: projectionModel,
       field,
       onSave: handleClose
     })));
-  })), !readonly && !expandedField && /* @__PURE__ */ React23.createElement("div", {
+  })), !readonly && !expandedField && /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "my-form-padding"
-  }, /* @__PURE__ */ React23.createElement(IconButton4, {
+  }, /* @__PURE__ */ React24.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("add-property-button.label"),
     onClick: handleAdd,
@@ -3104,10 +3002,10 @@ var customFields = ({ types, tags }) => ({
     const handleChange = useCallback18((query) => onValueChange(type, query.ast), [
       onValueChange
     ]);
-    return /* @__PURE__ */ React23.createElement(Input14.Root, null, /* @__PURE__ */ React23.createElement(FormFieldLabel, {
+    return /* @__PURE__ */ React24.createElement(Input14.Root, null, /* @__PURE__ */ React24.createElement(FormFieldLabel, {
       readonly,
       label
-    }), /* @__PURE__ */ React23.createElement(QueryForm, {
+    }), /* @__PURE__ */ React24.createElement(QueryForm, {
       initialQuery: getValue(),
       types,
       tags,
@@ -3138,6 +3036,7 @@ export {
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
+  createSelectField,
   detectFieldType,
   formatForDisplay,
   formatForEditing,
@@ -3149,7 +3048,6 @@ export {
   omitId,
   parseValue,
   pathNotUniqueError,
-  translations,
   useFormContext,
   useFormFieldState,
   useFormHandler,