@dxos/react-ui-form 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/dist/lib/browser/index.mjs

@@ -18,6 +18,7 @@ var translations = [
         "field limit reached": "Maximum number of fields reached",
         "boolean input true value": "Yes",
         "boolean input false value": "No",
+        "delete field label": "Delete field",
         // TODO(burdon): Factor out?
         "button cancel": "Cancel",
         "button save": "Save",
@@ -60,8 +61,8 @@ var translations = [
         "select option delete": "Delete",
         "select option add": "Add option",
         // System schema message.
-        "system schema title": "System Schema",
-        "system schema description": "This is a system schema and cannot be modified."
+        "system schema title": "System record type",
+        "system schema description": "This is a system record type and cannot be modified."
       }
     }
   }
@@ -260,7 +261,7 @@ import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortPrope
 
 // src/components/Form/custom/GeoPointInput.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback, useState, useEffect, useMemo } from "react";
+import React4, { useCallback, useEffect, useMemo, useState } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
 import { Input as Input4, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
@@ -374,12 +375,12 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
 
 // src/components/Form/custom/SelectOptionsInput.tsx
 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 React5, { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { PublicKey } from "@dxos/keys";
-import { Icon as Icon2, IconButton, Input as Input5, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { IconButton, Input as Input5, Tag, 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 mx4 } from "@dxos/react-ui-theme";
+import { hues, subtleHover } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
   var _effect = _useSignals5();
   try {
@@ -499,7 +500,8 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     }, options && /* @__PURE__ */ React5.createElement(List.Root, {
       items: options,
       isItem: (item) => true,
-      onMove: handleMove
+      onMove: disabled ? void 0 : handleMove,
+      readonly: disabled
     }, ({ items }) => /* @__PURE__ */ React5.createElement("div", {
       role: "list",
       className: "w-full overflow-auto"
@@ -509,29 +511,35 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       role: "button",
       item,
       classNames: [
-        "p-1 plb-2",
-        "flex flex-col",
-        "cursor-pointer",
-        "hover:bg-hoverOverlay"
+        subtleHover,
+        "flex flex-col cursor-pointer rounded-sm"
       ],
       "aria-expanded": selected === item.id
     }, /* @__PURE__ */ React5.createElement("div", {
       className: "flex items-center"
-    }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
+    }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, {
+      disabled
+    }), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
       onClick: () => handleClick(item.id),
       classNames: "flex-1"
     }, /* @__PURE__ */ React5.createElement(Tag, {
       palette: item.color
-    }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(Icon2, {
+    }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(IconButton, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t(selected === item.id ? "collapse label" : "expand label", {
+        ns: "os"
+      }),
       icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleClick(item.id)
     })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
-      className: "mis-4 mbs-2 flex flex-col gap-1"
+      className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
     }, /* @__PURE__ */ React5.createElement(Input5.Label, {
       classNames: "text-xs"
     }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
-      className: "flex flex-row items-center gap-1"
+      className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
     }, /* @__PURE__ */ React5.createElement(Input5.TextInput, {
+      disabled,
       placeholder: t("select option label placeholder"),
       ref: selected === item.id ? inputRef : void 0,
       value: item.title,
@@ -539,30 +547,24 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       onKeyDown: handleKeyDown,
       classNames: "flex-1",
       "data-no-submit": true
-    }), /* @__PURE__ */ React5.createElement(Toolbar.Root, {
-      classNames: "p-0 m-0 !is-auto"
-    }, /* @__PURE__ */ React5.createElement(HuePicker, {
+    }), /* @__PURE__ */ React5.createElement(HuePicker, {
+      disabled,
       value: item.color,
-      onChange: handleColorChange(item.id),
-      rootVariant: "toolbar-button"
-    })), /* @__PURE__ */ React5.createElement(IconButton, {
+      onChange: handleColorChange(item.id)
+    }), /* @__PURE__ */ React5.createElement(IconButton, {
+      disabled,
       icon: "ph--trash--fill",
       iconOnly: true,
       label: t("select option delete"),
       onClick: () => handleDelete(item.id)
-    })))))), /* @__PURE__ */ React5.createElement("div", {
-      role: "listitem"
-    }, /* @__PURE__ */ React5.createElement("div", {
-      role: "button",
-      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"
-    }, /* @__PURE__ */ React5.createElement(Icon2, {
-      icon: "ph--plus--regular"
-    }), /* @__PURE__ */ React5.createElement("span", {
-      className: "text-sm"
-    }, t("select option add")))))))));
+    })))))), /* @__PURE__ */ React5.createElement(IconButton, {
+      variant: "ghost",
+      icon: "ph--plus--regular",
+      label: t("select option add"),
+      onClick: handleAdd,
+      disabled,
+      classNames: "is-full"
+    })))));
   } finally {
     _effect.f();
   }
@@ -572,7 +574,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6 from "react";
 import { Input as Input6 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -591,7 +593,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
       error,
       label
     }), /* @__PURE__ */ React6.createElement("div", {
-      className: mx5("grid gap-2", gridCols[binding.length - 1])
+      className: mx4("grid gap-2", gridCols[binding.length - 1])
     }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input6.TextInput, {
       key: prop,
       type: "number",
@@ -760,11 +762,11 @@ 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";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // src/components/Form/FormContext.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { createContext, useContext, useEffect as useEffect6, useMemo as useMemo3, useCallback as useCallback6 } from "react";
+import React8, { createContext, useCallback as useCallback6, useContext, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -781,7 +783,7 @@ var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.t
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 93,
+    L: 95,
     S: void 0,
     A: [
       "SchemaAST.isTypeLiteral(schema.ast)",
@@ -885,7 +887,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 213,
+        L: 215,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -956,7 +958,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 275,
+    L: 277,
     S: void 0,
     A: [
       "obj",
@@ -1133,7 +1135,7 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
     const { canSave, handleSave } = useFormContext();
     return /* @__PURE__ */ React9.createElement("div", {
       role: "none",
-      className: mx6(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
+      className: mx5(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",
@@ -1158,20 +1160,10 @@ import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
 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 mx8 } from "@dxos/react-ui-theme";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
-// src/components/Form/ArrayField.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import { SchemaAST as SchemaAST3, pipe } from "effect";
-import { capitalize } from "effect/String";
-import React10, { Fragment, useCallback as useCallback7 } from "react";
-import { findNode as findNode2, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton3, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { getSchemaProperties } from "@dxos/schema";
-
 // src/util/field.ts
 import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
 var parseValue = ({ type, format, value }) => {
@@ -1480,6 +1472,14 @@ var getRefProps = (property) => {
 };
 
 // src/components/Form/ArrayField.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import { SchemaAST as SchemaAST3, pipe } from "effect";
+import { capitalize } from "effect/String";
+import React10, { Fragment, useCallback as useCallback7 } from "react";
+import { SimpleType, findNode as findNode2, getDiscriminatedType, isDiscriminatedUnion } from "@dxos/effect";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { IconButton as IconButton3, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { getSchemaProperties } from "@dxos/schema";
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
   var _effect = _useSignals10();
@@ -1489,7 +1489,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     const values = useFormValues(path ?? []) ?? [];
     invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
       F: __dxlog_file3,
-      L: 36,
+      L: 37,
       S: void 0,
       A: [
         "Array.isArray(values)",
@@ -1576,16 +1576,35 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   }
 };
 
+// src/components/Form/factory.tsx
+import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case FormatEnum4.GeoPoint:
+      return GeoPointInput;
+    case FormatEnum4.Markdown:
+      return MarkdownInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
+};
+
 // src/components/Form/RefField.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import React11, { useCallback as useCallback8, useMemo as useMemo4 } from "react";
-import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo-schema";
+import { Expando, Ref, ReferenceAnnotationId as ReferenceAnnotationId2, getTypeAnnotation } from "@dxos/echo-schema";
 import { findAnnotation as findAnnotation2 } from "@dxos/effect";
 import { DXN } from "@dxos/keys";
 import { DxRefTag } from "@dxos/lit-ui/react";
 import { Input as Input8, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { TagPicker } from "@dxos/react-ui-tag-picker";
-import { descriptionText, mx as mx7 } from "@dxos/react-ui-theme";
+import { descriptionText, mx as mx6 } 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();
@@ -1684,7 +1703,7 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
     }), /* @__PURE__ */ React11.createElement("div", {
       "data-no-submit": true
     }, disabled ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-      className: mx7(descriptionText, "mbe-2")
+      className: mx6(descriptionText, "mbe-2")
     }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React11.createElement(DxRefTag, {
       key: item.id,
       refid: item.id,
@@ -1743,25 +1762,6 @@ var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValu
   }
 };
 
-// src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case FormatEnum4.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum4.Markdown:
-      return MarkdownInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
-};
-
 // src/components/Form/FormContent.tsx
 var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
   var _effect = _useSignals12();
@@ -1860,7 +1860,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: mx8("text-lg mlb-inputSpacingBlock first:mbs-0")
+          className: mx7("text-lg mlb-inputSpacingBlock first:mbs-0")
         }, label), /* @__PURE__ */ React12.createElement(FormFields, {
           schema: Schema.make(typeLiteral),
           path,
@@ -1892,7 +1892,7 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path,
     ]);
     return /* @__PURE__ */ React12.createElement("div", {
       role: "form",
-      className: mx8("is-full", classNames),
+      className: mx7("is-full", classNames),
       ref: forwardRef2
     }, properties.map((property) => {
       return /* @__PURE__ */ React12.createElement(FormField, {
@@ -1955,7 +1955,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
       ],
       readonly,
       schema
-    }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React13.createElement(FormActions, {
+    }), (onCancel || onSave) && !autoSave && !readonly && /* @__PURE__ */ React13.createElement(FormActions, {
       readonly,
       onCancel,
       outerSpacing
@@ -1967,7 +1967,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
 
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }) => {
+var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, outerSpacing }) => {
   var _effect = _useSignals14();
   try {
     const { t } = useTranslation8(translationKey);
@@ -2102,7 +2102,7 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
         props
       }, {
         F: __dxlog_file4,
-        L: 173,
+        L: 182,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2111,6 +2111,7 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
     return /* @__PURE__ */ React14.createElement(Form, {
       key: field.id,
       autoFocus: true,
+      readonly,
       values: props,
       schema: fieldSchema,
       filter: propIsNotType,
@@ -2139,13 +2140,14 @@ import { invariant as invariant3 } from "@dxos/invariant";
 import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
 import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
-import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
-import { FieldSchema, VIEW_FIELD_LIMIT, ProjectionModel } from "@dxos/schema";
+import { inputTextLabel, mx as mx8, subtleHover as subtleHover2 } from "@dxos/react-ui-theme";
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT } from "@dxos/schema";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
+var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
+var listItemGrid = "grid grid-cols-subgrid col-span-5";
 var ViewMetaSchema = Schema2.Struct({
   typename: Format.URL.annotations({
-    title: "Typename"
+    title: "Record type"
   })
 }).pipe(Schema2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, showHeading = false, onTypenameChanged, onDelete, outerSpacing = true }) => {
@@ -2159,7 +2161,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       schema,
       view.projection
     ]);
-    const [field, setField] = useState6();
+    const [expandedField, setExpandedField] = useState6();
     const readonly = _readonly || !isMutable(schema);
     const viewValues = useMemo8(() => {
       return {
@@ -2170,26 +2172,23 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     }, [
       view.query.typename
     ]);
-    const handleSelect = useCallback10((field2) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => f === field2 ? void 0 : field2);
+    const handleToggleField = useCallback10((field) => {
+      setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
     }, [
       readonly
     ]);
     const handleAdd = useCallback10(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 88,
+        L: 86,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      const field2 = projection.createFieldProjection();
-      setField(field2);
+      const field = projection.createFieldProjection();
+      setExpandedField(field.id);
     }, [
       schema,
       projection,
@@ -2198,7 +2197,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     const handleUpdate = useCallback10(({ typename }) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 95,
+        L: 93,
         S: void 0,
         A: [
           "!readonly",
@@ -2218,26 +2217,26 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     const handleDelete = useCallback10((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 107,
+        L: 105,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      if (fieldId === field?.id) {
-        setField(void 0);
+      if (fieldId === expandedField) {
+        setExpandedField(void 0);
       }
       onDelete?.(fieldId);
     }, [
-      field,
+      expandedField,
       onDelete,
       readonly
     ]);
     const handleMove = useCallback10((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 119,
+        L: 117,
         S: void 0,
         A: [
           "!readonly",
@@ -2254,29 +2253,30 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       view.projection.fields,
       readonly
     ]);
-    const handleClose = useCallback10(() => setField(void 0), []);
+    const handleClose = useCallback10(() => setExpandedField(void 0), []);
     const hiddenProperties = projection.getHiddenProperties();
     const handleHide = useCallback10((fieldId) => {
-      setField(void 0);
+      setExpandedField(void 0);
       projection.hideFieldProjection(fieldId);
     }, [
       projection
     ]);
     const handleShow = useCallback10((property) => {
-      setField(void 0);
+      setExpandedField(void 0);
       projection.showFieldProjection(property);
     }, [
       projection
     ]);
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
-      className: mx9(classNames)
-    }, readonly && /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      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, {
+      className: mx8(classNames)
+    }, readonly && /* @__PURE__ */ React15.createElement(Callout.Root, {
+      valence: "info",
+      classNames: [
+        "is-full mlb-cardSpacingBlock",
+        outerSpacing && "mli-cardSpacingInline"
+      ]
+    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React15.createElement(Form, {
       autoSave: true,
       schema: ViewMetaSchema,
       values: viewValues,
@@ -2286,63 +2286,82 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
     }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
+    }, /* @__PURE__ */ React15.createElement("h2", {
+      className: mx8(inputTextLabel)
     }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
       items: view.projection.fields,
       isItem: Schema2.is(FieldSchema),
-      getId: (field2) => field2.id,
-      readonly,
-      onMove: readonly ? void 0 : handleMove
-    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
-      role: "heading",
-      className: grid
-    }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement("div", {
-      className: "flex items-center text-sm"
-    }, t("field path label"))), /* @__PURE__ */ React15.createElement("div", {
+      getId: (field) => field.id,
+      onMove: readonly ? void 0 : handleMove,
+      readonly
+    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("h3", {
+      className: "text-sm"
+    }, t("field path label")), /* @__PURE__ */ React15.createElement("div", {
       role: "list",
-      className: "flex flex-col is-full"
-    }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
-      key: field2.id,
-      item: field2,
-      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(List2.ItemButton, {
+      className: listGrid
+    }, fields?.map((field) => /* @__PURE__ */ React15.createElement(List2.Item, {
+      key: field.id,
+      item: field,
+      classNames: listItemGrid,
+      "aria-expanded": expandedField === field.id
+    }, /* @__PURE__ */ React15.createElement("div", {
+      role: "none",
+      className: mx8(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
+    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
+      disabled: readonly
+    }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
+      onClick: () => handleToggleField(field)
+    }, field.path), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+      label: t("hide field label"),
       "data-testid": "hide-field-button",
       icon: "ph--eye-slash--regular",
+      autoHide: false,
       // TDOO(burdon): Is this the correct test?
-      disabled: view.projection.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
-    }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
-      disabled: view.projection.fields.length <= 1,
-      onClick: () => handleDelete(field2.id)
-    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
+      disabled: readonly || view.projection.fields.length <= 1,
+      onClick: () => handleHide(field.id)
+    }), /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
+      label: t("delete field label"),
+      autoHide: false,
+      disabled: readonly || view.projection.fields.length <= 1,
+      onClick: () => handleDelete(field.id),
+      "data-testid": "field.delete"
+    }), /* @__PURE__ */ React15.createElement(IconButton4, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("toggle expand label", {
+        ns: "os"
+      }),
+      icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+      onClick: () => handleToggleField(field)
+    })), expandedField === field.id && /* @__PURE__ */ React15.createElement("div", {
+      role: "none",
+      className: "col-span-5"
+    }, /* @__PURE__ */ React15.createElement(FieldEditor, {
+      readonly,
+      projection,
+      field,
+      registry,
+      onSave: handleClose
+    }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("h2", {
+      className: mx8(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 is-full"
+      className: "grid grid-cols-[1fr_min-content]"
     }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
       key: property,
       item: property,
-      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, {
+      classNames: mx8("grid grid-cols-subgrid col-span-2 rounded-sm", subtleHover2)
+    }, /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+      label: t("show field label"),
+      disabled: readonly,
       icon: "ph--eye--regular",
       onClick: () => handleShow(property),
       "data-testid": "show-field-button"
-    }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
-      key: field.id,
-      projection,
-      field,
-      registry,
-      onSave: handleClose
-    }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
+    }))))))), !readonly && !expandedField && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ React15.createElement(IconButton4, {
@@ -2351,7 +2370,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
-      classNames: "flex is-full"
+      classNames: "is-full"
     })));
   } finally {
     _effect.f();