@dxos/react-ui-form 0.8.2-main.2f9c567 → 0.8.2-main.36232bc

package/dist/lib/node/index.cjs

@@ -62,8 +62,7 @@ __export(node_exports, {
   useForm: () => useForm,
   useFormContext: () => useFormContext,
   useFormValues: () => useFormValues,
-  useInputProps: () => useInputProps,
-  useRefQueryLookupHandler: () => useRefQueryLookupHandler
+  useInputProps: () => useInputProps
 });
 module.exports = __toCommonJS(node_exports);
 var import_react = __toESM(require("react"));
@@ -112,34 +111,25 @@ var import_effect3 = require("@dxos/effect");
 var import_invariant = require("@dxos/invariant");
 var import_log2 = require("@dxos/log");
 var import_schema2 = require("@dxos/schema");
-var import_react13 = require("react");
-var import_echo_schema5 = require("@dxos/echo-schema");
-var import_echo = require("@dxos/react-client/echo");
-var import_util3 = require("@dxos/util");
 var import_effect4 = require("effect");
 var import_String = require("effect/String");
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
+var import_echo_schema5 = require("@dxos/echo-schema");
 var import_effect5 = require("@dxos/effect");
 var import_react_ui_theme8 = require("@dxos/react-ui-theme");
 var import_schema3 = require("@dxos/schema");
-var import_util4 = require("@dxos/util");
+var import_util3 = require("@dxos/util");
 var import_effect6 = require("effect");
 var import_String2 = require("effect/String");
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
+var import_echo_schema6 = require("@dxos/echo-schema");
 var import_effect7 = require("@dxos/effect");
 var import_invariant2 = require("@dxos/invariant");
 var import_react_ui10 = require("@dxos/react-ui");
 var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_schema4 = require("@dxos/schema");
-var import_react16 = __toESM(require("react"));
-var import_echo_schema6 = require("@dxos/echo-schema");
-var import_effect8 = require("@dxos/effect");
-var import_keys2 = require("@dxos/keys");
-var import_live_object = require("@dxos/live-object");
-var import_log3 = require("@dxos/log");
 var import_echo_schema7 = require("@dxos/echo-schema");
-var import_effect9 = require("effect");
-var import_react17 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_echo_schema8 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_react_ui11 = require("@dxos/react-ui");
@@ -648,28 +638,23 @@ var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, on
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
-  const value = getValue3();
-  const handleValueChange = (0, import_react8.useCallback)((value2) => onValueChange(type, value2), [
-    type,
-    onValueChange
-  ]);
   return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
-    value,
-    onValueChange: handleValueChange
+    value: getValue3(),
+    onValueChange: (value) => onValueChange(type, value)
   }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Content, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Viewport, null, options?.map(({ value: value2, label: label2 }) => (
+  }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Content, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
     /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Option, {
-      key: String(value2),
-      value: String(value2)
-    }, label2 ?? String(value2))
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
   )))))), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
 };
 var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
@@ -718,7 +703,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     L: 93,
     S: void 0,
     A: [
-      "SchemaAST.isTypeLiteral(schema.ast)",
+      "AST.isTypeLiteral(schema.ast)",
       ""
     ]
   });
@@ -911,29 +896,6 @@ var flatMap = (errors) => {
     return result;
   }, {});
 };
-var useRefQueryLookupHandler = ({ space }) => {
-  const handleRefQueryLookup = (0, import_react13.useCallback)(async (typeInfo) => {
-    if (!space) {
-      return [];
-    }
-    const query = space.db.query(import_echo.Filter.typename(typeInfo.typename));
-    const { objects } = await query.run();
-    return objects.map((object) => {
-      const dxn = (0, import_echo_schema5.getDXN)(object);
-      if (!dxn) {
-        return void 0;
-      }
-      const item = {
-        dxn,
-        label: object?.name ?? object?.id ?? ""
-      };
-      return item;
-    }).filter(import_util3.isNonNullable);
-  }, [
-    space
-  ]);
-  return handleRefQueryLookup;
-};
 var FormContext = /* @__PURE__ */ (0, import_react11.createContext)(void 0);
 var useFormContext = () => {
   return (0, import_react11.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
@@ -1028,7 +990,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   const values = useFormValues(path ?? []) ?? [];
   (0, import_invariant2.invariant)(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
     F: __dxlog_file2,
-    L: 38,
+    L: 39,
     S: void 0,
     A: [
       "Array.isArray(values)",
@@ -1036,11 +998,11 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     ]
   });
   const label = title ?? (0, import_effect6.pipe)(name, import_String2.capitalize);
-  const tupleType = (0, import_effect7.findNode)(ast, import_effect6.SchemaAST.isTupleType);
+  const tupleType = (0, import_effect7.findNode)(ast, import_echo_schema6.AST.isTupleType);
   const elementType = tupleType?.rest[0]?.type;
   const getDefaultObjectValue = (typeNode) => {
     const baseNode = (0, import_effect7.findNode)(typeNode, import_effect7.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? (0, import_effect7.getDiscriminatedType)(baseNode, {}) : (0, import_effect7.findNode)(typeNode, import_effect6.SchemaAST.isTypeLiteral);
+    const typeLiteral = baseNode ? (0, import_effect7.getDiscriminatedType)(baseNode, {}) : (0, import_effect7.findNode)(typeNode, import_echo_schema6.AST.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
@@ -1049,7 +1011,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       prop.defaultValue
     ]));
   };
-  const newValue = (0, import_react15.useMemo)(() => {
+  const newValue = (0, import_react14.useMemo)(() => {
     if (type === "object" && elementType) {
       return getDefaultObjectValue(elementType);
     } else {
@@ -1059,7 +1021,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     type,
     elementType
   ]);
-  const handleAdd = (0, import_react15.useCallback)(() => {
+  const handleAdd = (0, import_react14.useCallback)(() => {
     inputProps.onValueChange(type, [
       ...values,
       newValue
@@ -1071,7 +1033,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     newValue,
     values
   ]);
-  const handleRemove = (0, import_react15.useCallback)((index) => {
+  const handleRemove = (0, import_react14.useCallback)((index) => {
     const newValues = values.filter((_, i) => i !== index);
     inputProps.onValueChange(type, newValues);
   }, [
@@ -1082,20 +1044,20 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
+  return /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme9.mx)(padding)
-  }, /* @__PURE__ */ import_react15.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react15.default.createElement("div", {
+  }, /* @__PURE__ */ import_react14.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ import_react15.default.createElement("div", {
+  }, values.map((_value, index) => /* @__PURE__ */ import_react14.default.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react15.default.createElement("div", {
+  }, /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ import_react15.default.createElement(FormField, {
+  }, /* @__PURE__ */ import_react14.default.createElement(FormField, {
     property: {
       ...property,
       array: false,
@@ -1109,115 +1071,21 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     inline: true,
     Custom,
     lookupComponent
-  })), /* @__PURE__ */ import_react15.default.createElement(import_react_ui10.IconButton, {
+  })), /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
     onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ import_react15.default.createElement("div", {
+  })))), /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui10.IconButton, {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
     onClick: handleAdd
   })));
 };
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/RefField.tsx";
-var RefField = ({ ast, type, label, readonly, placeholder, inline, onQueryRefOptions, inputProps }) => {
-  const { getValue: getValue3, onValueChange, ...restInputProps } = inputProps;
-  const refTypeInfo = (0, import_effect8.findAnnotation)(ast, import_echo_schema6.ReferenceAnnotationId);
-  const [refOptions, setRefOptions] = (0, import_react16.useState)([]);
-  const [loading, setLoading] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
-      return;
-    }
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const options = await onQueryRefOptions(refTypeInfo);
-        setRefOptions(options.map((option) => ({
-          label: option.label,
-          value: option.dxn.toString()
-        })));
-      } catch (error) {
-        import_log3.log.error("Failed to fetch ref options:", error, {
-          F: __dxlog_file3,
-          L: 69,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setRefOptions([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-    void fetchOptions();
-  }, [
-    refTypeInfo,
-    onQueryRefOptions
-  ]);
-  if (!refTypeInfo) {
-    return null;
-  }
-  if (refTypeInfo.typename === (0, import_echo_schema6.getTypeAnnotation)(import_echo_schema6.Expando)?.typename || !onQueryRefOptions) {
-    const handleOnValueChange = (_type, dxnString) => {
-      const dxn = import_keys2.DXN.tryParse(dxnString);
-      if (dxn) {
-        onValueChange?.("object", (0, import_live_object.refFromDXN)(dxn));
-      } else if (dxnString === "") {
-        onValueChange?.("object", void 0);
-      } else {
-        onValueChange?.("string", dxnString);
-      }
-    };
-    const handleGetValue2 = () => {
-      const formValue = getValue3();
-      if (typeof formValue === "string") {
-        return formValue;
-      }
-      if (import_echo_schema6.Ref.isRef(formValue)) {
-        return formValue.dxn.toString();
-      }
-      return void 0;
-    };
-    return /* @__PURE__ */ import_react16.default.createElement(TextInput, {
-      type,
-      label,
-      disabled: readonly,
-      placeholder,
-      inputOnly: inline,
-      getValue: handleGetValue2,
-      onValueChange: handleOnValueChange,
-      ...restInputProps
-    });
-  }
-  const handleGetValue = () => {
-    const formValue = getValue3();
-    if (import_echo_schema6.Ref.isRef(formValue)) {
-      return formValue.dxn.toString();
-    }
-    return void 0;
-  };
-  const handleValueChanged = (_type, dxnString) => {
-    const dxn = import_keys2.DXN.parse(dxnString);
-    const ref = (0, import_live_object.refFromDXN)(dxn);
-    onValueChange("object", ref);
-  };
-  return /* @__PURE__ */ import_react16.default.createElement(SelectInput, {
-    type,
-    label,
-    disabled: readonly || loading,
-    placeholder: loading ? "Loading options..." : placeholder,
-    inputOnly: inline,
-    getValue: handleGetValue,
-    onValueChange: handleValueChanged,
-    options: refOptions,
-    ...restInputProps
-  });
-};
 var getInputComponent = (type, format) => {
   switch (format) {
     case import_echo_schema7.FormatEnum.GeoPoint:
@@ -1234,20 +1102,20 @@ var getInputComponent = (type, format) => {
       return BooleanInput;
   }
 };
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
+var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = (0, import_react14.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
+  const label = (0, import_react13.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
     title,
     name
   ]);
-  const placeholder = (0, import_react14.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+  const placeholder = (0, import_react13.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
     examples,
     description
   ]);
   const FoundComponent = lookupComponent?.({
     prop: name,
-    schema: import_effect4.Schema.make(ast),
+    schema: import_echo_schema5.S.make(ast),
     inputProps: {
       type,
       format,
@@ -1258,14 +1126,14 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
     }, FoundComponent);
   }
   const jsonPath = (0, import_effect5.createJsonPath)(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return /* @__PURE__ */ import_react14.default.createElement(CustomComponent, {
+    return /* @__PURE__ */ import_react13.default.createElement(CustomComponent, {
       type,
       format,
       label,
@@ -1276,7 +1144,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     });
   }
   if (array) {
-    return /* @__PURE__ */ import_react14.default.createElement(ArrayField, {
+    return /* @__PURE__ */ import_react13.default.createElement(ArrayField, {
       property,
       path,
       inputProps,
@@ -1286,9 +1154,9 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
   }
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ import_react14.default.createElement(InputComponent, {
+    }, /* @__PURE__ */ import_react13.default.createElement(InputComponent, {
       type,
       format,
       label,
@@ -1299,9 +1167,9 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     }));
   }
   if (options) {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ import_react14.default.createElement(SelectInput, {
+    }, /* @__PURE__ */ import_react13.default.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -1315,41 +1183,25 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       ...inputProps
     }));
   }
-  if (format === "ref") {
-    return /* @__PURE__ */ import_react14.default.createElement(RefField, {
-      ast,
-      type,
-      label,
-      readonly,
-      placeholder,
-      inline,
-      onQueryRefOptions,
-      inputProps
-    });
-  }
   if (type === "object") {
     const baseNode = (0, import_effect5.findNode)(ast, import_effect5.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? (0, import_effect5.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect5.findNode)(ast, import_effect4.SchemaAST.isTypeLiteral);
+    const typeLiteral = baseNode ? (0, import_effect5.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect5.findNode)(ast, import_echo_schema5.AST.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ import_react14.default.createElement("div", {
+      return /* @__PURE__ */ import_react13.default.createElement("div", {
         role: "none"
-      }, !inline && /* @__PURE__ */ import_react14.default.createElement("h3", {
-        className: "text-lg mbs-2 mbe-1"
-      }, label), /* @__PURE__ */ import_react14.default.createElement(FormFields, {
-        schema: import_effect4.Schema.make(typeLiteral),
+      }, !inline && /* @__PURE__ */ import_react13.default.createElement("div", null, label), /* @__PURE__ */ import_react13.default.createElement(FormFields, {
+        schema: import_echo_schema5.S.make(typeLiteral),
         path,
         readonly,
-        onQueryRefOptions,
-        Custom,
-        lookupComponent
+        Custom
       }));
     }
   }
   return null;
 };
-var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, lookupComponent, Custom }) => {
+var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
   const values = useFormValues(path);
-  const properties = (0, import_react14.useMemo)(() => {
+  const properties = (0, import_react13.useMemo)(() => {
     const props = (0, import_schema3.getSchemaProperties)(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
@@ -1359,11 +1211,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
     role: "form",
     className: (0, import_react_ui_theme8.mx)("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ import_react14.default.createElement(FormField, {
+    return /* @__PURE__ */ import_react13.default.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -1371,13 +1223,12 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
         property.name
       ],
       readonly,
-      onQueryRefOptions,
       lookupComponent,
       Custom
     });
-  }).filter(import_util4.isNotFalsy));
+  }).filter(import_util3.isNotFalsy));
 };
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
   const formRef = (0, import_react9.useRef)(null);
   const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
     autoSave,
@@ -1413,7 +1264,6 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     readonly,
     filter,
     sort,
-    onQueryRefOptions,
     lookupComponent,
     Custom
   }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
@@ -1421,7 +1271,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     readonly
   })));
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const { t } = (0, import_react_ui3.useTranslation)(translationKey);
   const [props, setProps] = (0, import_react3.useState)(projection.getFieldProjection(field.id).props);
@@ -1554,7 +1404,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     import_log.log.warn("invalid format", {
       props
     }, {
-      F: __dxlog_file4,
+      F: __dxlog_file3,
       L: 174,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1578,24 +1428,24 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     Custom
   });
 };
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = import_effect9.Schema.Struct({
-  name: import_effect9.Schema.String.annotations({
-    [import_effect9.SchemaAST.TitleAnnotationId]: "View"
+var ViewMetaSchema = import_echo_schema8.S.Struct({
+  name: import_echo_schema8.S.String.annotations({
+    [import_echo_schema8.AST.TitleAnnotationId]: "View"
   }),
   typename: import_echo_schema8.Format.URL.annotations({
-    [import_effect9.SchemaAST.TitleAnnotationId]: "Typename"
+    [import_echo_schema8.AST.TitleAnnotationId]: "Typename"
   })
-}).pipe(import_effect9.Schema.mutable);
+}).pipe(import_echo_schema8.S.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = (0, import_react_ui11.useTranslation)(translationKey);
-  const projection = (0, import_react17.useMemo)(() => new import_schema5.ViewProjection(schema.jsonSchema, view), [
+  const projection = (0, import_react15.useMemo)(() => new import_schema5.ViewProjection(schema.jsonSchema, view), [
     schema,
     view
   ]);
-  const [field, setField] = (0, import_react17.useState)();
-  const viewValues = (0, import_react17.useMemo)(() => {
+  const [field, setField] = (0, import_react15.useState)();
+  const viewValues = (0, import_react15.useMemo)(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -1605,13 +1455,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleSelect = (0, import_react17.useCallback)((field2) => {
+  const handleSelect = (0, import_react15.useCallback)((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = (0, import_react17.useCallback)(() => {
+  const handleAdd = (0, import_react15.useCallback)(() => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
-      F: __dxlog_file5,
-      L: 77,
+      F: __dxlog_file4,
+      L: 76,
       S: void 0,
       A: [
         "!schema.readonly",
@@ -1624,10 +1474,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view
   ]);
-  const handleUpdate = (0, import_react17.useCallback)(({ name, typename }) => {
+  const handleUpdate = (0, import_react15.useCallback)(({ name, typename }) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
-      F: __dxlog_file5,
-      L: 84,
+      F: __dxlog_file4,
+      L: 83,
       S: void 0,
       A: [
         "!schema.readonly",
@@ -1647,10 +1497,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     view,
     onTypenameChanged
   ]);
-  const handleDelete = (0, import_react17.useCallback)((fieldId) => {
+  const handleDelete = (0, import_react15.useCallback)((fieldId) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
-      F: __dxlog_file5,
-      L: 100,
+      F: __dxlog_file4,
+      L: 99,
       S: void 0,
       A: [
         "!schema.readonly",
@@ -1666,10 +1516,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     field,
     onDelete
   ]);
-  const handleMove = (0, import_react17.useCallback)((fromIndex, toIndex) => {
+  const handleMove = (0, import_react15.useCallback)((fromIndex, toIndex) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
-      F: __dxlog_file5,
-      L: 112,
+      F: __dxlog_file4,
+      L: 111,
       S: void 0,
       A: [
         "!schema.readonly",
@@ -1686,95 +1536,91 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view.fields
   ]);
-  const handleClose = (0, import_react17.useCallback)(() => setField(void 0), []);
+  const handleClose = (0, import_react15.useCallback)(() => setField(void 0), []);
   const hiddenProperties = projection.getHiddenProperties();
-  const handleHide = (0, import_react17.useCallback)((fieldId) => {
+  const handleHide = (0, import_react15.useCallback)((fieldId) => {
     setField(void 0);
     projection.hideFieldProjection(fieldId);
   }, [
     projection
   ]);
-  const handleShow = (0, import_react17.useCallback)((property) => {
+  const handleShow = (0, import_react15.useCallback)((property) => {
     setField(void 0);
     projection.showFieldProjection(property);
   }, [
     projection
   ]);
-  return /* @__PURE__ */ import_react17.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme10.mx)("grid grid-rows-[1fr_1fr] min-bs-0", classNames)
-  }, /* @__PURE__ */ import_react17.default.createElement(Form, {
+    className: (0, import_react_ui_theme10.mx)("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ import_react15.default.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSave: schema.readonly ? void 0 : handleUpdate,
-    classNames: "min-bs-0 overflow-y-auto"
-  }), /* @__PURE__ */ import_react17.default.createElement("div", {
-    role: "none",
-    className: "border-bs border-separator min-bs-0 overflow-y-auto"
-  }, /* @__PURE__ */ import_react17.default.createElement("div", {
+    onSave: schema.readonly ? void 0 : handleUpdate
+  }), /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ import_react17.default.createElement("label", {
+  }, /* @__PURE__ */ import_react15.default.createElement("label", {
     className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.Root, {
+  }, t("fields label"))), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Root, {
     items: view.fields,
-    isItem: import_effect9.Schema.is(import_schema5.FieldSchema),
+    isItem: import_echo_schema8.S.is(import_schema5.FieldSchema),
     getId: (field2) => field2.id,
     onMove: schema.readonly ? void 0 : handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, showHeading && /* @__PURE__ */ import_react17.default.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, showHeading && /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ import_react17.default.createElement("div", null), /* @__PURE__ */ import_react17.default.createElement("div", {
+  }, /* @__PURE__ */ import_react15.default.createElement("div", null), /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ import_react17.default.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Item, {
     key: field2.id,
     item: field2,
     classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemTitle, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ import_react17.default.createElement("div", {
+  }, field2.path), /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex items-center gap-2 -ml-4"
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemButton, {
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), !schema.readonly && /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
+  }), !schema.readonly && /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
-  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement("div", {
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ import_react17.default.createElement("label", {
+  }, /* @__PURE__ */ import_react15.default.createElement("label", {
     className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
-  }, t("hidden fields label"))), /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.Root, {
+  }, t("hidden fields label"))), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Root, {
     items: hiddenProperties,
     isItem: (item) => typeof item === "string",
     getId: (property) => property
-  }, ({ items: properties }) => /* @__PURE__ */ import_react17.default.createElement("div", {
+  }, ({ items: properties }) => /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, properties?.map((property) => /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.Item, {
+  }, properties?.map((property) => /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Item, {
     key: property,
     item: property,
     classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react17.default.createElement("div", null), /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react17.default.createElement(import_react_ui_list2.List.ItemButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement("div", null), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemButton, {
     icon: "ph--eye--regular",
     onClick: () => handleShow(property)
-  }))))))), field && /* @__PURE__ */ import_react17.default.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ import_react15.default.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ import_react17.default.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.IconButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui11.IconButton, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: schema.readonly ? void 0 : handleAdd,
@@ -2081,7 +1927,6 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   useForm,
   useFormContext,
   useFormValues,
-  useInputProps,
-  useRefQueryLookupHandler
+  useInputProps
 });
 //# sourceMappingURL=index.cjs.map