@dxos/react-ui-form 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/dist/lib/node/index.cjs

@@ -91,6 +91,7 @@ var import_util = require("@dxos/util");
 var import_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react5 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_stack = require("@dxos/react-ui-stack");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_tracking6 = require("@preact-signals/safe-react/tracking");
 var import_react6 = __toESM(require("react"));
@@ -109,10 +110,12 @@ var import_react8 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
 var import_tracking9 = require("@preact-signals/safe-react/tracking");
 var import_react9 = __toESM(require("react"));
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react_ui_stack2 = require("@dxos/react-ui-stack");
 var import_tracking10 = require("@preact-signals/safe-react/tracking");
 var import_react10 = __toESM(require("react"));
 var import_react_ui9 = require("@dxos/react-ui");
+var import_react_ui_stack3 = require("@dxos/react-ui-stack");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
 var import_tracking11 = require("@preact-signals/safe-react/tracking");
 var import_react11 = __toESM(require("react"));
 var import_debug = require("@dxos/debug");
@@ -172,6 +175,7 @@ var import_echo_schema11 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_react_ui12 = require("@dxos/react-ui");
 var import_react_ui_list2 = require("@dxos/react-ui-list");
+var import_react_ui_stack4 = require("@dxos/react-ui-stack");
 var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_schema5 = require("@dxos/schema");
 var translationKey = "react-ui-form";
@@ -203,6 +207,7 @@ var translations_default = [
         "format date-time": "DateTime",
         "format did": "DID",
         "format duration": "Duration",
+        "format dxn": "DXN",
         "format email": "Email",
         "format formula": "Formula",
         "format hostname": "Hostname",
@@ -215,12 +220,14 @@ var translations_default = [
         "format regex": "RegExp",
         "format string": "String",
         "format single-select": "Select",
+        "format multi-select": "Multi-select",
         "format text": "Long text",
         "format time": "Time",
         "format timestamp": "Timestamp",
         "format user": "User",
         "format number": "Number",
         "format uri": "URI",
+        "format url": "URL",
         "format uuid": "UUID",
         // Placeholders.
         "placeholder latitude": "Latitude",
@@ -233,7 +240,7 @@ var translations_default = [
         "select option add": "Add option",
         // System schema message.
         "system schema title": "System Schema",
-        "system schema description": "This schema is managed by the system and cannot be modified."
+        "system schema description": "This is a system schema and cannot be modified."
       }
     }
   }
@@ -289,7 +296,7 @@ var ControlPage = ({ children, classNames, ...props }) => {
   try {
     return /* @__PURE__ */ import_react2.default.createElement("div", {
       role: "none",
-      className: (0, import_react_ui_theme2.mx)("pli-2", classNames),
+      className: (0, import_react_ui_theme2.mx)("pli-cardSpacingInline", classNames),
       ...props
     }, children);
   } finally {
@@ -312,9 +319,9 @@ var ControlSectionHeading = ({ title, description }) => {
   try {
     const { t } = (0, import_react_ui2.useTranslation)(translationKey);
     return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("h2", {
-      className: "pli-4 container-max-width text-xl mbs-6 mbe-4"
+      className: "pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
     }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
-      className: "pli-4 mlb-4 container-max-width text-description"
+      className: "pli-trimMd mlb-trimMd container-max-width text-description"
     }, (0, import_react_ui2.toLocalizedString)(description, t)));
   } finally {
     _effect.f();
@@ -339,7 +346,7 @@ var ControlGroup = ({ children, classNames }) => {
   try {
     return /* @__PURE__ */ import_react2.default.createElement("div", {
       role: "none",
-      className: (0, import_react_ui_theme2.mx)("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
+      className: (0, import_react_ui_theme2.mx)("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", classNames)
     }, children);
   } finally {
     _effect.f();
@@ -350,15 +357,15 @@ var ControlFrame = ({ children }) => {
   try {
     return /* @__PURE__ */ import_react2.default.createElement("div", {
       role: "none",
-      className: "p-4 border border-separator rounded-lg container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-2 md:gap-8"
+      className: "p-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md"
     }, children);
   } finally {
     _effect.f();
   }
 };
-var controlItemClasses = "p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-2";
+var controlItemClasses = "pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0";
 var controlItemTitleClasses = "text-lg font-normal";
-var controlItemDescriptionClasses = "text-base mlb-2 md:mbe-0 text-description";
+var controlItemDescriptionClasses = "text-base mlb-trimSm md:mbe-0 text-description";
 var ControlItem = ({ title, description, children }) => {
   var _effect = (0, import_tracking2.useSignals)();
   try {
@@ -403,19 +410,23 @@ var ControlFrameItem = ({ title, description, children }) => {
     }, /* @__PURE__ */ import_react2.default.createElement("h3", {
       className: "text-lg mbe-2"
     }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
-      className: "mlb-2 md:mbe-0 text-description"
+      className: "mlb-trimSm md:mbe-0 text-description"
     }, (0, import_react_ui2.toLocalizedString)(description, t)), children);
   } finally {
     _effect.f();
   }
 };
-var InputHeader = ({ children, error }) => {
+var InputHeader = ({ error, label, readonly }) => {
   var _effect = (0, import_tracking5.useSignals)();
   try {
+    const Label = readonly ? "span" : import_react_ui5.Input.Label;
+    const labelProps = readonly ? {} : {
+      classNames: "!mlb-0"
+    };
     return /* @__PURE__ */ import_react5.default.createElement("div", {
       role: "none",
-      className: "flex justify-between items-center mbs-2 mbe-1 first:mbs-0"
-    }, children, error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
+      className: (0, import_react_ui_theme3.mx)("flex justify-between items-center", import_react_ui_stack.labelSpacing)
+    }, /* @__PURE__ */ import_react5.default.createElement(Label, labelProps, label), error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
       asChild: true,
       content: error,
       side: "bottom"
@@ -477,8 +488,9 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
       validationValence: status
     }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ import_react4.default.createElement("div", {
       role: "none",
       className: "grid grid-cols-2 gap-2"
     }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
@@ -614,8 +626,9 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
       validationValence: status
     }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ import_react6.default.createElement("div", {
       role: "none"
     }, options && /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Root, {
       items: options,
@@ -697,8 +710,9 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
     return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
       validationValence: status
     }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ import_react7.default.createElement("div", {
       className: (0, import_react_ui_theme5.mx)("grid gap-2", gridCols[binding.length - 1])
     }, binding.map((prop) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
       key: prop,
@@ -722,8 +736,9 @@ var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, get
     return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__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)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
       disabled,
       placeholder,
       value: getValue3() ?? "",
@@ -741,8 +756,9 @@ var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, g
     return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__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)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
       type: "number",
       disabled,
       placeholder,
@@ -763,8 +779,9 @@ var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, on
     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)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Switch, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Switch, {
       checked,
       onCheckedChange: (value) => onValueChange(type, value)
     }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
@@ -784,8 +801,9 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
     return disabled && !value ? null : /* @__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)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
       value,
       onValueChange: handleValueChange
     }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.TriggerButton, {
@@ -829,8 +847,9 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
     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)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextArea, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextArea, {
       ref: textareaRef,
       disabled,
       placeholder,
@@ -1182,14 +1201,14 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
     _effect.f();
   }
 };
-var FormActions = ({ readonly, onCancel }) => {
+var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
   var _effect = (0, import_tracking10.useSignals)();
   try {
     const { t } = (0, import_react_ui9.useTranslation)(translationKey);
     const { canSave, handleSave } = useFormContext();
     return /* @__PURE__ */ import_react10.default.createElement("div", {
       role: "none",
-      className: "flex [&_button]:grow gap-1 pli-2 pbe-2"
+      className: (0, import_react_ui_theme6.mx)(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? import_react_ui_stack3.cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
     }, onCancel && !readonly && /* @__PURE__ */ import_react10.default.createElement(import_react_ui9.IconButton, {
       "data-testid": "cancel-button",
       icon: "ph--x--regular",
@@ -1549,7 +1568,10 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     if (!elementType) {
       return null;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react16.default.createElement("div", {
+    return readonly && values.length < 1 ? null : /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(InputHeader, {
+      readonly: true,
+      label
+    }), /* @__PURE__ */ import_react16.default.createElement("div", {
       role: "none",
       className: readonly ? "flex flex-wrap gap-1 mlb-1" : values.length > 0 ? "grid gap-1 grid-cols-[1fr_min-content] mlb-1" : "hidden"
     }, values.map((_value, index) => {
@@ -1681,8 +1703,9 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
     return disabled && items.length < 1 ? null : /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ import_react17.default.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Label, null, label)), /* @__PURE__ */ import_react17.default.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ import_react17.default.createElement("div", {
       "data-no-submit": true
     }, disabled ? items.length < 1 ? /* @__PURE__ */ import_react17.default.createElement("p", {
       className: (0, import_react_ui_theme8.mx)(import_react_ui_theme8.descriptionText, "mbe-2")
@@ -1762,8 +1785,8 @@ var getInputComponent = (type, format) => {
 var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
   var _effect = (0, import_tracking12.useSignals)();
   try {
-    const inputProps = useInputProps(path);
     const { ast, name, type, format, title, description, options, examples, array } = property;
+    const inputProps = useInputProps(path);
     const label = (0, import_react15.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
       title,
       name
@@ -1856,7 +1879,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       const typeLiteral = baseNode ? (0, import_effect5.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect5.findNode)(ast, import_effect4.SchemaAST.isTypeLiteral);
       if (typeLiteral) {
         return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, !inline && /* @__PURE__ */ import_react15.default.createElement("h3", {
-          className: "text-lg mbs-2 mbe-1 first:mbs-0"
+          className: (0, import_react_ui_theme7.mx)("text-lg mlb-inputSpacingBlock first:mbs-0")
         }, label), /* @__PURE__ */ import_react15.default.createElement(FormFields, {
           schema: import_effect4.Schema.make(typeLiteral),
           path,
@@ -1872,7 +1895,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     _effect.f();
   }
 };
-var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lookupComponent, onQueryRefOptions }) => {
+var FormFields = /* @__PURE__ */ (0, import_react15.forwardRef)(({ classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions }, forwardRef2) => {
   var _effect = (0, import_tracking12.useSignals)();
   try {
     const values = useFormValues(path);
@@ -1886,35 +1909,33 @@ var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lo
       filter,
       sort
     ]);
-    return (
-      // TODO(burdon): Consistent padding (with composite forms).
-      /* @__PURE__ */ import_react15.default.createElement("div", {
-        role: "form",
-        className: (0, import_react_ui_theme7.mx)("p-2 is-full", classNames)
-      }, properties.map((property) => {
-        return /* @__PURE__ */ import_react15.default.createElement(FormField, {
-          key: property.name,
-          property,
-          path: [
-            ...path ?? [],
-            property.name
-          ],
-          readonly,
-          onQueryRefOptions,
-          lookupComponent,
-          Custom
-        });
-      }).filter(import_util4.isNotFalsy))
-    );
+    return /* @__PURE__ */ import_react15.default.createElement("div", {
+      role: "form",
+      className: (0, import_react_ui_theme7.mx)("is-full", classNames),
+      ref: forwardRef2
+    }, properties.map((property) => {
+      return /* @__PURE__ */ import_react15.default.createElement(FormField, {
+        key: property.name,
+        property,
+        path: [
+          ...path ?? [],
+          property.name
+        ],
+        readonly,
+        onQueryRefOptions,
+        lookupComponent,
+        Custom
+      });
+    }).filter(import_util4.isNotFalsy));
   } finally {
     _effect.f();
   }
-};
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
+});
+var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }) => {
   var _effect = (0, import_tracking9.useSignals)();
   try {
     const formRef = (0, import_react9.useRef)(null);
-    const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
+    const handleValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
       autoSave,
       onSave
     ]);
@@ -1935,32 +1956,33 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
       initialValues,
       onValuesChanged,
       onValidate,
-      onValid,
+      onValid: handleValid,
       onSave
     }, /* @__PURE__ */ import_react9.default.createElement("div", {
-      ref: formRef,
       role: "none",
-      className: (0, import_react_ui_theme6.mx)("flex flex-col gap-4", classNames),
+      className: "contents",
       "data-testid": testId
     }, /* @__PURE__ */ import_react9.default.createElement(FormFields, {
-      schema,
-      path,
+      ...props,
+      ref: formRef,
+      classNames: [
+        outerSpacing === "blockStart-0" ? "pli-cardSpacingInline mbe-cardSpacingBlock [&>.mbs-inputSpacingBlock:first-child]:!mbs-0" : outerSpacing === "scroll-fields" ? "pli-cardSpacingInline pbe-cardSpacingBlock" : outerSpacing ? import_react_ui_stack2.cardSpacing : false,
+        outerSpacing === "scroll-fields" && import_react_ui_stack2.cardDialogOverflow,
+        classNames
+      ],
       readonly,
-      filter,
-      sort,
-      onQueryRefOptions,
-      lookupComponent,
-      Custom
+      schema
     }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
+      readonly,
       onCancel,
-      readonly
+      outerSpacing
     })));
   } finally {
     _effect.f();
   }
 };
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
+var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerSpacing }) => {
   var _effect = (0, import_tracking3.useSignals)();
   try {
     const { t } = (0, import_react_ui3.useTranslation)(translationKey);
@@ -2095,7 +2117,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
         props
       }, {
         F: __dxlog_file4,
-        L: 175,
+        L: 183,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2115,14 +2137,15 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
       onValidate: handleValidate,
       onSave: handleSave,
       onCancel: handleCancel,
-      Custom: custom
+      Custom: custom,
+      outerSpacing
     });
   } finally {
     _effect.f();
   }
 };
 var __dxlog_file5 = "/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 grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = import_effect12.Schema.Struct({
   name: import_effect12.Schema.String.annotations({
     title: "View"
@@ -2131,7 +2154,7 @@ var ViewMetaSchema = import_effect12.Schema.Struct({
     title: "Typename"
   })
 }).pipe(import_effect12.Schema.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
+var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, showHeading = false, onTypenameChanged, onDelete, outerSpacing = true }) => {
   var _effect = (0, import_tracking15.useSignals)();
   try {
     const { t } = (0, import_react_ui12.useTranslation)(translationKey);
@@ -2143,7 +2166,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view
     ]);
     const [field, setField] = (0, import_react19.useState)();
-    const immutable = readonly || !(0, import_echo_schema11.isMutable)(schema);
+    const readonly = _readonly || !(0, import_echo_schema11.isMutable)(schema);
     const viewValues = (0, import_react19.useMemo)(() => {
       return {
         name: view.name,
@@ -2155,20 +2178,20 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view
     ]);
     const handleSelect = (0, import_react19.useCallback)((field2) => {
-      if (immutable) {
+      if (readonly) {
         return;
       }
       setField((f) => f === field2 ? void 0 : field2);
     }, [
-      immutable
+      readonly
     ]);
     const handleAdd = (0, import_react19.useCallback)(() => {
-      (0, import_invariant3.invariant)(!immutable, void 0, {
+      (0, import_invariant3.invariant)(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 88,
+        L: 92,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2176,15 +2199,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       setField(field2);
     }, [
       schema,
-      view
+      view,
+      readonly
     ]);
     const handleUpdate = (0, import_react19.useCallback)(({ name, typename }) => {
-      (0, import_invariant3.invariant)(!immutable, void 0, {
+      (0, import_invariant3.invariant)(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 95,
+        L: 99,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2192,7 +2216,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
         if (view.name !== name) {
           view.name = name;
         }
-        if (view.query.typename !== typename && !immutable) {
+        if (view.query.typename !== typename && !readonly) {
           onTypenameChanged?.(typename);
         }
       });
@@ -2200,15 +2224,15 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       schema,
       view,
       onTypenameChanged,
-      immutable
+      readonly
     ]);
     const handleDelete = (0, import_react19.useCallback)((fieldId) => {
-      (0, import_invariant3.invariant)(!immutable, void 0, {
+      (0, import_invariant3.invariant)(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 111,
+        L: 115,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2219,15 +2243,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     }, [
       schema,
       field,
-      onDelete
+      onDelete,
+      readonly
     ]);
     const handleMove = (0, import_react19.useCallback)((fromIndex, toIndex) => {
-      (0, import_invariant3.invariant)(!immutable, void 0, {
+      (0, import_invariant3.invariant)(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 123,
+        L: 127,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2239,7 +2264,8 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view.fields = fields;
     }, [
       schema,
-      view.fields
+      view.fields,
+      readonly
     ]);
     const handleClose = (0, import_react19.useCallback)(() => setField(void 0), []);
     const hiddenProperties = projection.getHiddenProperties();
@@ -2257,36 +2283,30 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     ]);
     return /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "none",
-      className: (0, import_react_ui_theme9.mx)("overflow-y-auto", classNames)
-    }, immutable && /* @__PURE__ */ import_react19.default.createElement("div", {
+      className: (0, import_react_ui_theme9.mx)(classNames)
+    }, readonly && /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "none",
-      className: "mbe-2"
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Root, {
-      valence: "neutral",
-      className: "rounded"
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Title, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Icon, {
-      icon: "ph--info--regular",
-      size: 5,
-      classNames: "inline"
-    }), " ", t("system schema title")), /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Body, null, t("system schema description")))), /* @__PURE__ */ import_react19.default.createElement(Form, {
+      className: (0, import_react_ui_theme9.mx)("is-full", outerSpacing && "plb-cardSpacingBlock pli-cardSpacingInline")
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Callout.Root, {
+      valence: "info"
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Callout.Title, null, t("system schema description")))), /* @__PURE__ */ import_react19.default.createElement(Form, {
       autoSave: true,
       schema: ViewMetaSchema,
       values: viewValues,
+      readonly,
       onSave: handleUpdate,
-      classNames: "min-bs-0 overflow-y-auto"
+      outerSpacing
     }), /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "none",
-      className: "min-bs-0 overflow-y-auto"
-    }, /* @__PURE__ */ import_react19.default.createElement("div", {
-      role: "none",
-      className: "p-2"
+      className: outerSpacing ? import_react_ui_stack4.cardSpacing : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ import_react19.default.createElement("label", {
       className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
-    }, t("fields label"))), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
+    }, t("fields label")), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
       items: view.fields,
       isItem: import_effect12.Schema.is(import_schema5.FieldSchema),
       getId: (field2) => field2.id,
-      onMove: immutable ? void 0 : handleMove
+      readonly,
+      onMove: readonly ? void 0 : handleMove
     }, ({ items: fields }) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, showHeading && /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "heading",
       className: grid
@@ -2294,41 +2314,38 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       className: "flex items-center text-sm"
     }, t("field path label"))), /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "list",
-      className: "flex flex-col w-full"
+      className: "flex flex-col is-full"
     }, fields?.map((field2) => /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Item, {
       key: field2.id,
       item: field2,
-      classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, !immutable && "cursor-pointer")
+      classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, "overflow-hidden", !readonly && "cursor-pointer")
     }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemTitle, {
       onClick: () => handleSelect(field2)
-    }, field2.path), /* @__PURE__ */ import_react19.default.createElement("div", {
-      className: "flex items-center gap-2 -ml-4"
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
+    }, field2.path), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
+      "data-testid": "hide-field-button",
       icon: "ph--eye-slash--regular",
+      // TDOO(burdon): Is this the correct test?
       disabled: view.fields.length <= 1,
-      onClick: () => handleHide(field2.id),
-      "data-testid": "hide-field-button"
-    }), !immutable && /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
-      icon: "ph--trash--regular",
+      onClick: () => handleHide(field2.id)
+    }), !readonly && /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
       disabled: view.fields.length <= 1,
       onClick: () => handleDelete(field2.id)
-    }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", {
-      role: "none",
-      className: "p-2"
-    }, /* @__PURE__ */ import_react19.default.createElement("label", {
+    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("label", {
       className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
-    }, t("hidden fields label"))), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
+    }, t("hidden fields label")), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
       items: hiddenProperties,
       isItem: (item) => typeof item === "string",
       getId: (property) => property
     }, ({ items: properties }) => /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "list",
-      className: "flex flex-col w-full"
+      className: "flex flex-col is-full"
     }, properties?.map((property) => /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Item, {
       key: property,
       item: property,
-      classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, !immutable && "cursor-pointer")
-    }, /* @__PURE__ */ import_react19.default.createElement("div", null), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
+      classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, !readonly && "cursor-pointer")
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDragHandle, {
+      disabled: true
+    }), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
       icon: "ph--eye--regular",
       onClick: () => handleShow(property),
       "data-testid": "show-field-button"
@@ -2341,11 +2358,11 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       onSave: handleClose
     }), !readonly && !field && /* @__PURE__ */ import_react19.default.createElement("div", {
       role: "none",
-      className: "p-2"
+      className: outerSpacing ? import_react_ui_stack4.cardSpacing : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.IconButton, {
       icon: "ph--plus--regular",
       label: t("button add property"),
-      onClick: immutable ? void 0 : handleAdd,
+      onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.fields.length >= import_schema5.VIEW_FIELD_LIMIT,
       classNames: "flex is-full"