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

package/dist/lib/browser/index.mjs

@@ -28,6 +28,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",
@@ -40,12 +41,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",
@@ -58,7 +61,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."
       }
     }
   }
@@ -126,7 +129,7 @@ var ControlPage = ({ children, classNames, ...props }) => {
   try {
     return /* @__PURE__ */ React2.createElement("div", {
       role: "none",
-      className: mx2("pli-2", classNames),
+      className: mx2("pli-cardSpacingInline", classNames),
       ...props
     }, children);
   } finally {
@@ -149,9 +152,9 @@ var ControlSectionHeading = ({ title, description }) => {
   try {
     const { t } = useTranslation(translationKey);
     return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.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"
     }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
-      className: "pli-4 mlb-4 container-max-width text-description"
+      className: "pli-trimMd mlb-trimMd container-max-width text-description"
     }, toLocalizedString(description, t)));
   } finally {
     _effect.f();
@@ -176,7 +179,7 @@ var ControlGroup = ({ children, classNames }) => {
   try {
     return /* @__PURE__ */ React2.createElement("div", {
       role: "none",
-      className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
+      className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", classNames)
     }, children);
   } finally {
     _effect.f();
@@ -187,15 +190,15 @@ var ControlFrame = ({ children }) => {
   try {
     return /* @__PURE__ */ React2.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 = _useSignals2();
   try {
@@ -240,7 +243,7 @@ var ControlFrameItem = ({ title, description, children }) => {
     }, /* @__PURE__ */ React2.createElement("h3", {
       className: "text-lg mbe-2"
     }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
-      className: "mlb-2 md:mbe-0 text-description"
+      className: "mlb-trimSm md:mbe-0 text-description"
     }, toLocalizedString(description, t)), children);
   } finally {
     _effect.f();
@@ -259,21 +262,26 @@ import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortPrope
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4, { useCallback, useState, useEffect, useMemo } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
-import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Input as Input4, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3 from "react";
-import { Icon, Tooltip } from "@dxos/react-ui";
-import { errorText } from "@dxos/react-ui-theme";
-var InputHeader = ({ children, error }) => {
+import { Icon, Input as Input3, Tooltip } from "@dxos/react-ui";
+import { labelSpacing } from "@dxos/react-ui-stack";
+import { errorText, mx as mx3 } from "@dxos/react-ui-theme";
+var InputHeader = ({ error, label, readonly }) => {
   var _effect = _useSignals3();
   try {
+    const Label = readonly ? "span" : Input3.Label;
+    const labelProps = readonly ? {} : {
+      classNames: "!mlb-0"
+    };
     return /* @__PURE__ */ React3.createElement("div", {
       role: "none",
-      className: "flex justify-between items-center mbs-2 mbe-1 first:mbs-0"
-    }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+      className: mx3("flex justify-between items-center", labelSpacing)
+    }, /* @__PURE__ */ React3.createElement(Label, labelProps, label), error && /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
       asChild: true,
       content: error,
       side: "bottom"
@@ -334,14 +342,15 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
       onValueChange,
       type
     ]);
-    return /* @__PURE__ */ React4.createElement(Input3.Root, {
+    return /* @__PURE__ */ React4.createElement(Input4.Root, {
       validationValence: status
     }, /* @__PURE__ */ React4.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ React4.createElement("div", {
       role: "none",
       className: "grid grid-cols-2 gap-2"
-    }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+    }, /* @__PURE__ */ React4.createElement(Input4.TextInput, {
       type: "text",
       pattern: "^-?[0-9]*\\.?[0-9]*$",
       disabled,
@@ -349,7 +358,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
       value: latitudeText,
       onChange: handleCoordinateChange("latitude", setLatitudeText),
       onBlur
-    }), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+    }), /* @__PURE__ */ React4.createElement(Input4.TextInput, {
       type: "text",
       pattern: "^-?[0-9]*\\.?[0-9]*$",
       disabled,
@@ -367,10 +376,10 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
 import { PublicKey } from "@dxos/keys";
-import { Icon as Icon2, IconButton, Input as Input4, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { Icon as Icon2, IconButton, Input as Input5, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, mx as mx3 } from "@dxos/react-ui-theme";
+import { hues, mx as mx4 } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
   var _effect = _useSignals5();
   try {
@@ -480,11 +489,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       selected,
       isNewOption
     ]);
-    return /* @__PURE__ */ React5.createElement(Input4.Root, {
+    return /* @__PURE__ */ React5.createElement(Input5.Root, {
       validationValence: status
     }, /* @__PURE__ */ React5.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ React5.createElement("div", {
       role: "none"
     }, options && /* @__PURE__ */ React5.createElement(List.Root, {
       items: options,
@@ -498,7 +508,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     }, /* @__PURE__ */ React5.createElement(List.Item, {
       role: "button",
       item,
-      classNames: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+      classNames: mx4("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
       "aria-expanded": selected === item.id
     }, /* @__PURE__ */ React5.createElement("div", {
       className: "flex items-center"
@@ -512,11 +522,11 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       onClick: () => handleClick(item.id)
     })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
       className: "mis-4 mbs-2 flex flex-col gap-1"
-    }, /* @__PURE__ */ React5.createElement(Input4.Label, {
+    }, /* @__PURE__ */ React5.createElement(Input5.Label, {
       classNames: "text-xs"
     }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
       className: "flex flex-row items-center gap-1"
-    }, /* @__PURE__ */ React5.createElement(Input4.TextInput, {
+    }, /* @__PURE__ */ React5.createElement(Input5.TextInput, {
       placeholder: t("select option label placeholder"),
       ref: selected === item.id ? inputRef : void 0,
       value: item.title,
@@ -539,7 +549,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       role: "listitem"
     }, /* @__PURE__ */ React5.createElement("div", {
       role: "button",
-      className: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+      className: mx4("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
       onClick: handleAdd
     }, /* @__PURE__ */ React5.createElement("div", {
       className: "flex items-center gap-1"
@@ -556,8 +566,8 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6 from "react";
-import { Input as Input5 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { Input as Input6 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -570,13 +580,14 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
   try {
     const { status, error } = getStatus();
     const values = getValue3() ?? {};
-    return /* @__PURE__ */ React6.createElement(Input5.Root, {
+    return /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
     }, /* @__PURE__ */ React6.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
-      className: mx4("grid gap-2", gridCols[binding.length - 1])
-    }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input5.TextInput, {
+      error,
+      label
+    }), /* @__PURE__ */ React6.createElement("div", {
+      className: mx5("grid gap-2", gridCols[binding.length - 1])
+    }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input6.TextInput, {
       key: prop,
       type: "number",
       disabled,
@@ -595,22 +606,23 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-import { Input as Input6, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Input as Input7, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
 var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   var _effect = _useSignals7();
   try {
     const { status, error } = getStatus();
-    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input6.Root, {
+    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input6.TextInput, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
       disabled,
       placeholder,
       value: getValue3() ?? "",
       onChange: (event) => onValueChange(type, event.target.value),
       onBlur
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.Validation, null, error));
+    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.Validation, null, error));
   } finally {
     _effect.f();
   }
@@ -619,18 +631,19 @@ var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, g
   var _effect = _useSignals7();
   try {
     const { status, error } = getStatus();
-    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input6.Root, {
+    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input6.TextInput, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
       type: "number",
       disabled,
       placeholder,
       value: getValue3() ?? 0,
       onChange: (event) => onValueChange(type, event.target.value),
       onBlur
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
+    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
@@ -641,14 +654,15 @@ var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, on
     const { status, error } = getStatus();
     const checked = Boolean(getValue3());
     const { t } = useTranslation4(translationKey);
-    return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    return /* @__PURE__ */ React7.createElement(Input7.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), disabled ? /* @__PURE__ */ React7.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ React7.createElement(Input6.Switch, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ React7.createElement(Input7.Switch, {
       checked,
       onCheckedChange: (value) => onValueChange(type, value)
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
+    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
@@ -662,11 +676,12 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
       type,
       onValueChange
     ]);
-    return disabled && !value ? null : /* @__PURE__ */ React7.createElement(Input6.Root, {
+    return disabled && !value ? null : /* @__PURE__ */ React7.createElement(Input7.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), disabled ? /* @__PURE__ */ React7.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ React7.createElement(Select.Root, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ React7.createElement(Select.Root, {
       value,
       onValueChange: handleValueChange
     }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
@@ -679,7 +694,7 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
         key: String(value2),
         value: String(value2)
       }, label2 ?? String(value2))
-    )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
+    )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
@@ -707,11 +722,12 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
       getValue3(),
       adjustHeight
     ]);
-    return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    return /* @__PURE__ */ React7.createElement(Input7.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input6.TextArea, {
+      error,
+      label
+    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextArea, {
       ref: textareaRef,
       disabled,
       placeholder,
@@ -723,7 +739,7 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
         resize: "none"
       },
       spellCheck: false
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.Validation, null, error));
+    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.Validation, null, error));
   } finally {
     _effect.f();
   }
@@ -732,12 +748,14 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
 import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { mx as mx7 } from "@dxos/react-ui-theme";
+import { cardDialogOverflow, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import React9 from "react";
 import { IconButton as IconButton2, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { cardSpacing } from "@dxos/react-ui-stack";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
@@ -1103,14 +1121,14 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
 };
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-var FormActions = ({ readonly, onCancel }) => {
+var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
   var _effect = _useSignals9();
   try {
     const { t } = useTranslation5(translationKey);
     const { canSave, handleSave } = useFormContext();
     return /* @__PURE__ */ React9.createElement("div", {
       role: "none",
-      className: "flex [&_button]:grow gap-1 pli-2 pbe-2"
+      className: mx6(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
     }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
       "data-testid": "cancel-button",
       icon: "ph--x--regular",
@@ -1133,9 +1151,9 @@ var FormActions = ({ readonly, onCancel }) => {
 import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
 import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React12, { useMemo as useMemo5 } from "react";
+import React12, { forwardRef, useMemo as useMemo5 } from "react";
 import { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
@@ -1509,7 +1527,10 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     if (!elementType) {
       return null;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
+    return readonly && values.length < 1 ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(InputHeader, {
+      readonly: true,
+      label
+    }), /* @__PURE__ */ React10.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) => {
@@ -1557,9 +1578,9 @@ import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnno
 import { findAnnotation as findAnnotation2 } from "@dxos/effect";
 import { DXN } from "@dxos/keys";
 import { DxRefTag } from "@dxos/lit-ui/react";
-import { Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Input as Input8, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { TagPicker } from "@dxos/react-ui-tag-picker";
-import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
+import { descriptionText, mx as mx7 } from "@dxos/react-ui-theme";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, onValueChange, ...restInputProps }) => {
   var _effect = _useSignals11();
@@ -1650,14 +1671,15 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
     }
     const { status, error } = restInputProps.getStatus();
     const items = handleGetValue();
-    return disabled && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input7.Root, {
+    return disabled && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input8.Root, {
       validationValence: status
     }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
-      error
-    }, /* @__PURE__ */ React11.createElement(Input7.Label, null, label)), /* @__PURE__ */ React11.createElement("div", {
+      error,
+      label
+    }), /* @__PURE__ */ React11.createElement("div", {
       "data-no-submit": true
     }, disabled ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-      className: mx5(descriptionText, "mbe-2")
+      className: mx7(descriptionText, "mbe-2")
     }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React11.createElement(DxRefTag, {
       key: item.id,
       refid: item.id,
@@ -1673,7 +1695,7 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
       onUpdate: handleUpdate,
       onSearch: handleSearch,
       classNames: "rounded-sm bg-inputSurface p-1.5"
-    })), inputOnly && /* @__PURE__ */ React11.createElement(Input7.DescriptionAndValidation, null, error));
+    })), inputOnly && /* @__PURE__ */ React11.createElement(Input8.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
@@ -1739,8 +1761,8 @@ var getInputComponent = (type, format) => {
 var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
   var _effect = _useSignals12();
   try {
-    const inputProps = useInputProps(path);
     const { ast, name, type, format, title, description, options, examples, array } = property;
+    const inputProps = useInputProps(path);
     const label = useMemo5(() => title ?? pipe2(name, capitalize2), [
       title,
       name
@@ -1833,7 +1855,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
       if (typeLiteral) {
         return /* @__PURE__ */ React12.createElement(React12.Fragment, null, !inline && /* @__PURE__ */ React12.createElement("h3", {
-          className: "text-lg mbs-2 mbe-1 first:mbs-0"
+          className: mx8("text-lg mlb-inputSpacingBlock first:mbs-0")
         }, label), /* @__PURE__ */ React12.createElement(FormFields, {
           schema: Schema.make(typeLiteral),
           path,
@@ -1849,7 +1871,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__ */ forwardRef(({ classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions }, forwardRef2) => {
   var _effect = _useSignals12();
   try {
     const values = useFormValues(path);
@@ -1863,37 +1885,35 @@ var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lo
       filter,
       sort
     ]);
-    return (
-      // TODO(burdon): Consistent padding (with composite forms).
-      /* @__PURE__ */ React12.createElement("div", {
-        role: "form",
-        className: mx6("p-2 is-full", classNames)
-      }, properties.map((property) => {
-        return /* @__PURE__ */ React12.createElement(FormField, {
-          key: property.name,
-          property,
-          path: [
-            ...path ?? [],
-            property.name
-          ],
-          readonly,
-          onQueryRefOptions,
-          lookupComponent,
-          Custom
-        });
-      }).filter(isNotFalsy))
-    );
+    return /* @__PURE__ */ React12.createElement("div", {
+      role: "form",
+      className: mx8("is-full", classNames),
+      ref: forwardRef2
+    }, properties.map((property) => {
+      return /* @__PURE__ */ React12.createElement(FormField, {
+        key: property.name,
+        property,
+        path: [
+          ...path ?? [],
+          property.name
+        ],
+        readonly,
+        onQueryRefOptions,
+        lookupComponent,
+        Custom
+      });
+    }).filter(isNotFalsy));
   } finally {
     _effect.f();
   }
-};
+});
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-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 = _useSignals13();
   try {
     const formRef = useRef3(null);
-    const onValid = useMemo6(() => autoSave ? onSave : void 0, [
+    const handleValid = useMemo6(() => autoSave ? onSave : void 0, [
       autoSave,
       onSave
     ]);
@@ -1914,25 +1934,26 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
       initialValues,
       onValuesChanged,
       onValidate,
-      onValid,
+      onValid: handleValid,
       onSave
     }, /* @__PURE__ */ React13.createElement("div", {
-      ref: formRef,
       role: "none",
-      className: mx7("flex flex-col gap-4", classNames),
+      className: "contents",
       "data-testid": testId
     }, /* @__PURE__ */ React13.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 ? cardSpacing2 : false,
+        outerSpacing === "scroll-fields" && cardDialogOverflow,
+        classNames
+      ],
       readonly,
-      filter,
-      sort,
-      onQueryRefOptions,
-      lookupComponent,
-      Custom
+      schema
     }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React13.createElement(FormActions, {
+      readonly,
       onCancel,
-      readonly
+      outerSpacing
     })));
   } finally {
     _effect.f();
@@ -1941,7 +1962,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 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 = _useSignals14();
   try {
     const { t } = useTranslation8(translationKey);
@@ -2076,7 +2097,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)
       });
@@ -2096,7 +2117,8 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
       onValidate: handleValidate,
       onSave: handleSave,
       onCancel: handleCancel,
-      Custom: custom
+      Custom: custom,
+      outerSpacing
     });
   } finally {
     _effect.f();
@@ -2109,12 +2131,13 @@ import { Schema as Schema2 } from "effect";
 import React15, { useCallback as useCallback10, useMemo as useMemo8, useState as useState6 } from "react";
 import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
-import { Icon as Icon3, IconButton as IconButton4, Message, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
+import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
+import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
 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 = Schema2.Struct({
   name: Schema2.String.annotations({
     title: "View"
@@ -2123,7 +2146,7 @@ var ViewMetaSchema = Schema2.Struct({
     title: "Typename"
   })
 }).pipe(Schema2.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 = _useSignals15();
   try {
     const { t } = useTranslation9(translationKey);
@@ -2135,7 +2158,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view
     ]);
     const [field, setField] = useState6();
-    const immutable = readonly || !isMutable(schema);
+    const readonly = _readonly || !isMutable(schema);
     const viewValues = useMemo8(() => {
       return {
         name: view.name,
@@ -2147,20 +2170,20 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view
     ]);
     const handleSelect = useCallback10((field2) => {
-      if (immutable) {
+      if (readonly) {
         return;
       }
       setField((f) => f === field2 ? void 0 : field2);
     }, [
-      immutable
+      readonly
     ]);
     const handleAdd = useCallback10(() => {
-      invariant3(!immutable, void 0, {
+      invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 88,
+        L: 92,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2168,15 +2191,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       setField(field2);
     }, [
       schema,
-      view
+      view,
+      readonly
     ]);
     const handleUpdate = useCallback10(({ name, typename }) => {
-      invariant3(!immutable, void 0, {
+      invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 95,
+        L: 99,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2184,7 +2208,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);
         }
       });
@@ -2192,15 +2216,15 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       schema,
       view,
       onTypenameChanged,
-      immutable
+      readonly
     ]);
     const handleDelete = useCallback10((fieldId) => {
-      invariant3(!immutable, void 0, {
+      invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 111,
+        L: 115,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2211,15 +2235,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     }, [
       schema,
       field,
-      onDelete
+      onDelete,
+      readonly
     ]);
     const handleMove = useCallback10((fromIndex, toIndex) => {
-      invariant3(!immutable, void 0, {
+      invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 123,
+        L: 127,
         S: void 0,
         A: [
-          "!immutable",
+          "!readonly",
           ""
         ]
       });
@@ -2231,7 +2256,8 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       view.fields = fields;
     }, [
       schema,
-      view.fields
+      view.fields,
+      readonly
     ]);
     const handleClose = useCallback10(() => setField(void 0), []);
     const hiddenProperties = projection.getHiddenProperties();
@@ -2249,36 +2275,30 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     ]);
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: mx8("overflow-y-auto", classNames)
-    }, immutable && /* @__PURE__ */ React15.createElement("div", {
+      className: mx9(classNames)
+    }, readonly && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "mbe-2"
-    }, /* @__PURE__ */ React15.createElement(Message.Root, {
-      valence: "neutral",
-      className: "rounded"
-    }, /* @__PURE__ */ React15.createElement(Message.Title, null, /* @__PURE__ */ React15.createElement(Icon3, {
-      icon: "ph--info--regular",
-      size: 5,
-      classNames: "inline"
-    }), " ", t("system schema title")), /* @__PURE__ */ React15.createElement(Message.Body, null, t("system schema description")))), /* @__PURE__ */ React15.createElement(Form, {
+      className: mx9("is-full", outerSpacing && "plb-cardSpacingBlock pli-cardSpacingInline")
+    }, /* @__PURE__ */ React15.createElement(Callout.Root, {
+      valence: "info"
+    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description")))), /* @__PURE__ */ React15.createElement(Form, {
       autoSave: true,
       schema: ViewMetaSchema,
       values: viewValues,
+      readonly,
       onSave: handleUpdate,
-      classNames: "min-bs-0 overflow-y-auto"
+      outerSpacing
     }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "min-bs-0 overflow-y-auto"
-    }, /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: "p-2"
+      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx8(inputTextLabel)
-    }, t("fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
+      className: mx9(inputTextLabel)
+    }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
       items: view.fields,
       isItem: Schema2.is(FieldSchema),
       getId: (field2) => field2.id,
-      onMove: immutable ? void 0 : handleMove
+      readonly,
+      onMove: readonly ? void 0 : handleMove
     }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
       role: "heading",
       className: grid
@@ -2286,41 +2306,38 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       className: "flex items-center text-sm"
     }, t("field path label"))), /* @__PURE__ */ React15.createElement("div", {
       role: "list",
-      className: "flex flex-col w-full"
+      className: "flex flex-col is-full"
     }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
       key: field2.id,
       item: field2,
-      classNames: mx8(grid, ghostHover, !immutable && "cursor-pointer")
+      classNames: mx9(grid, ghostHover, "overflow-hidden", !readonly && "cursor-pointer")
     }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
       onClick: () => handleSelect(field2)
-    }, field2.path), /* @__PURE__ */ React15.createElement("div", {
-      className: "flex items-center gap-2 -ml-4"
-    }, /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+    }, field2.path), /* @__PURE__ */ React15.createElement(List2.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__ */ React15.createElement(List2.ItemDeleteButton, {
-      icon: "ph--trash--regular",
+      onClick: () => handleHide(field2.id)
+    }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
       disabled: view.fields.length <= 1,
       onClick: () => handleDelete(field2.id)
-    }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: "p-2"
-    }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx8(inputTextLabel)
-    }, t("hidden fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
+    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
+      className: mx9(inputTextLabel)
+    }, t("hidden fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
       items: hiddenProperties,
       isItem: (item) => typeof item === "string",
       getId: (property) => property
     }, ({ items: properties }) => /* @__PURE__ */ React15.createElement("div", {
       role: "list",
-      className: "flex flex-col w-full"
+      className: "flex flex-col is-full"
     }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
       key: property,
       item: property,
-      classNames: mx8(grid, ghostHover, !immutable && "cursor-pointer")
-    }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+      classNames: mx9(grid, ghostHover, !readonly && "cursor-pointer")
+    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
+      disabled: true
+    }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
       icon: "ph--eye--regular",
       onClick: () => handleShow(property),
       "data-testid": "show-field-button"
@@ -2333,11 +2350,11 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
       onSave: handleClose
     }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: "p-2"
+      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ React15.createElement(IconButton4, {
       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 >= VIEW_FIELD_LIMIT,
       classNames: "flex is-full"