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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.f5c0578",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -29,48 +30,48 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.b97322e",
-    "@dxos/debug": "0.8.4-main.b97322e",
-    "@dxos/echo-schema": "0.8.4-main.b97322e",
-    "@dxos/echo": "0.8.4-main.b97322e",
-    "@dxos/echo-db": "0.8.4-main.b97322e",
-    "@dxos/effect": "0.8.4-main.b97322e",
-    "@dxos/invariant": "0.8.4-main.b97322e",
-    "@dxos/keys": "0.8.4-main.b97322e",
-    "@dxos/lit-ui": "0.8.4-main.b97322e",
-    "@dxos/log": "0.8.4-main.b97322e",
-    "@dxos/react-client": "0.8.4-main.b97322e",
-    "@dxos/live-object": "0.8.4-main.b97322e",
-    "@dxos/react-ui-list": "0.8.4-main.b97322e",
-    "@dxos/react-ui-stack": "0.8.4-main.b97322e",
-    "@dxos/react-ui-pickers": "0.8.4-main.b97322e",
-    "@dxos/react-ui-types": "0.8.4-main.b97322e",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.b97322e",
-    "@dxos/schema": "0.8.4-main.b97322e",
-    "@dxos/util": "0.8.4-main.b97322e"
+    "@dxos/async": "0.8.4-main.f5c0578",
+    "@dxos/echo": "0.8.4-main.f5c0578",
+    "@dxos/debug": "0.8.4-main.f5c0578",
+    "@dxos/echo-schema": "0.8.4-main.f5c0578",
+    "@dxos/echo-db": "0.8.4-main.f5c0578",
+    "@dxos/effect": "0.8.4-main.f5c0578",
+    "@dxos/invariant": "0.8.4-main.f5c0578",
+    "@dxos/keys": "0.8.4-main.f5c0578",
+    "@dxos/log": "0.8.4-main.f5c0578",
+    "@dxos/lit-ui": "0.8.4-main.f5c0578",
+    "@dxos/live-object": "0.8.4-main.f5c0578",
+    "@dxos/react-client": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-pickers": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-list": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-stack": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-types": "0.8.4-main.f5c0578",
+    "@dxos/schema": "0.8.4-main.f5c0578",
+    "@dxos/util": "0.8.4-main.f5c0578"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.b97322e",
-    "@dxos/random": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@dxos/echo-signals": "0.8.4-main.f5c0578",
+    "@dxos/react-ui": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f5c0578",
+    "@dxos/storybook-utils": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-theme": "0.8.4-main.f5c0578",
+    "@dxos/random": "0.8.4-main.f5c0578"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@dxos/react-ui": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-theme": "0.8.4-main.f5c0578"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -10,9 +10,10 @@ import React from 'react';
 import { StackItem } from '@dxos/react-ui-stack';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ControlPage, ControlSection, type ControlSectionProps } from './ControlSection';
 import { translations } from '../../translations';
 
+import { ControlPage, ControlSection, type ControlSectionProps } from './ControlSection';
+
 const meta: Meta<ControlSectionProps> = {
   title: 'ui/react-ui-form/ControlSection',
   component: ControlSection,

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { log } from '@dxos/log';
@@ -13,9 +13,10 @@ import { ProjectionModel } from '@dxos/schema';
 import { TestSchema, testView } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { FieldEditor, type FieldEditorProps } from './FieldEditor';
 import { translations } from '../../translations';
-import { TestLayout, TestPanel, FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout, TestPanel } from '../testing';
+
+import { FieldEditor, type FieldEditorProps } from './FieldEditor';
 
 // Type definition for debug objects exposed to tests.
 export type FieldEditorDebugObjects = {

package/src/components/FieldEditor/FieldEditor.test.tsx

@@ -3,14 +3,15 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, act } from '@testing-library/react';
+import { act, cleanup, fireEvent, screen } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { ProjectionModel } from '@dxos/schema';
 
+import { FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
+
 import * as stories from './FieldEditor.stories';
 import { type FieldEditorDebugObjects } from './FieldEditor.stories';
-import { FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 

package/src/components/FieldEditor/FieldEditor.tsx

@@ -5,23 +5,24 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { FormatEnum, FormatEnums, formatToType, type EchoSchema } from '@dxos/echo-schema';
+import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { useTranslation } from '@dxos/react-ui';
 import {
-  getFormatSchema,
-  getSchemaProperties,
-  sortProperties,
   type FieldType,
-  type PropertyType,
   type ProjectionModel,
+  type PropertyType,
   type SchemaProperty,
+  getFormatSchema,
+  getSchemaProperties,
+  sortProperties,
 } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { Form, type FormProps, type InputComponent, SelectInput, SelectOptionInput } from '../Form';
 
 export type FieldEditorProps = {
+  readonly?: boolean;
   projection: ProjectionModel;
   field: FieldType;
   registry?: SchemaRegistry;
@@ -32,7 +33,15 @@ export type FieldEditorProps = {
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }: FieldEditorProps) => {
+export const FieldEditor = ({
+  readonly,
+  projection,
+  field,
+  registry,
+  onSave,
+  onCancel,
+  outerSpacing,
+}: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -178,6 +187,7 @@ export const FieldEditor = ({ projection, field, registry, onSave, onCancel, out
     <Form<PropertyType>
       key={field.id}
       autoFocus
+      readonly={readonly}
       values={props}
       schema={fieldSchema}
       filter={propIsNotType}

package/src/components/Form/ArrayField.tsx

@@ -6,18 +6,19 @@ import { SchemaAST, pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { Fragment, useCallback } from 'react';
 
-import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
+import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { IconButton, useTranslation } from '@dxos/react-ui';
-import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
+import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
 
-import { type ComponentLookup } from './Form';
-import { FormField } from './FormContent';
-import { useFormValues, type FormInputStateProps } from './FormContext';
-import { InputHeader, type InputComponent } from './Input';
 import { translationKey } from '../../translations';
 import { findArrayElementType } from '../../util';
 
+import { type ComponentLookup } from './Form';
+import { FormField } from './FormContent';
+import { type FormInputStateProps, useFormValues } from './FormContext';
+import { type InputComponent, InputHeader } from './Input';
+
 type ArrayFieldProps = {
   property: SchemaProperty<any>;
   readonly?: boolean;

package/src/components/Form/Defaults.tsx

@@ -6,9 +6,10 @@ import React, { useCallback, useEffect, useRef } from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 
-import { type InputProps, InputHeader } from './Input';
 import { translationKey } from '../../translations';
 
+import { InputHeader, type InputProps } from './Input';
+
 export const TextInput = ({
   type,
   label,

package/src/components/Form/Form.stories.tsx

@@ -9,17 +9,18 @@ import { Schema } from 'effect';
 import React, { useCallback, useState } from 'react';
 
 import { ContactType } from '@dxos/client/testing';
-import { type BaseObject, Expando, Format, getObjectDXN, Ref, type TypeAnnotation } from '@dxos/echo-schema';
+import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
 import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SelectInput } from './Defaults';
-import { Form, type FormProps } from './Form';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
+import { SelectInput } from './Defaults';
+import { Form, type FormProps } from './Form';
+
 const AddressSchema = Schema.Struct({
   street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
   city: Schema.optional(Schema.String.annotations({ title: 'City' })),

package/src/components/Form/Form.tsx

@@ -10,11 +10,12 @@ import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
 import { type SchemaProperty } from '@dxos/schema';
 
+import { type FormOptions } from '../../hooks';
+
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
-import { type InputProps, type InputComponent } from './Input';
-import { type FormOptions } from '../../hooks';
+import { type InputComponent, type InputProps } from './Input';
 
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
@@ -99,7 +100,7 @@ export const Form = <T extends BaseObject>({
           readonly={readonly}
           schema={schema}
         />
-        {(onCancel || onSave) && !autoSave && (
+        {(onCancel || onSave) && !autoSave && !readonly && (
           <FormActions readonly={readonly} onCancel={onCancel} outerSpacing={outerSpacing} />
         )}
       </div>

package/src/components/Form/FormActions.tsx

@@ -8,9 +8,10 @@ import { IconButton, useTranslation } from '@dxos/react-ui';
 import { cardSpacing } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useFormContext } from './FormContext';
 import { translationKey } from '../../translations';
 
+import { useFormContext } from './FormContext';
+
 export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
 
 export type FormActionsProps = {

package/src/components/Form/FormContent.tsx

@@ -9,18 +9,19 @@ import React, { forwardRef, useMemo } from 'react';
 import { createJsonPath, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
+import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
+import { type QueryRefOptions } from '../../hooks';
+import { getRefProps } from '../../util';
+
 import { ArrayField } from './ArrayField';
 import { SelectInput } from './Defaults';
+import { getInputComponent } from './factory';
 import { type ComponentLookup } from './Form';
-import { useInputProps, useFormValues } from './FormContext';
+import { useFormValues, useInputProps } from './FormContext';
 import { type InputComponent } from './Input';
 import { RefField } from './RefField';
-import { getInputComponent } from './factory';
-import { type QueryRefOptions } from '../../hooks';
-import { getRefProps } from '../../util';
 
 export type FormFieldProps = {
   property: SchemaProperty<any>;

package/src/components/Form/FormContext.tsx

@@ -3,19 +3,19 @@
 //
 
 import React, {
-  createContext,
+  type FocusEvent,
+  type PropsWithChildren,
   type RefObject,
+  createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
-  type FocusEvent,
-  type PropsWithChildren,
-  useCallback,
 } from 'react';
 
 import { raise } from '@dxos/debug';
 import { type BaseObject, getValue } from '@dxos/echo-schema';
-import { createJsonPath, type SimpleType } from '@dxos/effect';
+import { type SimpleType, createJsonPath } from '@dxos/effect';
 
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 

package/src/components/Form/RefField.tsx

@@ -3,28 +3,29 @@
 //
 
 import { type SchemaAST } from 'effect';
-import React, { useCallback, useMemo, type FocusEvent } from 'react';
+import React, { type FocusEvent, useCallback, useMemo } from 'react';
 
 import {
   Expando,
-  getTypeAnnotation,
   Ref,
   ReferenceAnnotationId,
   type ReferenceAnnotationValue,
+  getTypeAnnotation,
 } from '@dxos/echo-schema';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { DxRefTag } from '@dxos/lit-ui/react';
 import { Input, useTranslation } from '@dxos/react-ui';
-import { TagPicker, type TagPickerMode, type TagPickerItemData } from '@dxos/react-ui-tag-picker';
+import { TagPicker, type TagPickerItemData, type TagPickerMode } from '@dxos/react-ui-tag-picker';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { TextInput } from './Defaults';
-import { InputHeader, type InputProps } from './Input';
 import { type QueryRefOptions, useQueryRefOptions } from '../../hooks';
 import { translationKey } from '../../translations';
 
+import { TextInput } from './Defaults';
+import { InputHeader, type InputProps } from './Input';
+
 type RefFieldProps = InputProps & {
   ast?: SchemaAST.AST;
   array?: boolean;

package/src/components/Form/custom/GeoPointInput.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState, useEffect, useMemo, type ChangeEvent } from 'react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type GeoPoint, GeoLocation } from '@dxos/echo-schema';
+import { GeoLocation, type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 

package/src/components/Form/custom/SelectOptionsInput.stories.tsx

@@ -8,14 +8,15 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useState } from 'react';
 
-import { SelectOptionSchema, type SelectOption } from '@dxos/echo-schema';
+import { type SelectOption, SelectOptionSchema } from '@dxos/echo-schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SelectOptionInput } from './SelectOptionsInput';
 import { translations } from '../../../translations';
 import { TestLayout, TestPanel } from '../../testing';
 import { Form } from '../Form';
 
+import { SelectOptionInput } from './SelectOptionsInput';
+
 const schema = Schema.Struct({
   options: Schema.Array(SelectOptionSchema).pipe(Schema.mutable),
 }).pipe(Schema.mutable);

package/src/components/Form/custom/SelectOptionsInput.tsx

@@ -2,19 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useState, useRef } from 'react';
+import React, { type ChangeEvent, type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import { type SelectOption } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
-import { type ChromaticPalette, Icon, IconButton, Input, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, mx } from '@dxos/react-ui-theme';
+import { hues, subtleHover } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-// TODO(ZaymonFC): Handle disabled.
 export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => {
   const [selected, setSelectedId] = useState<string | null>(null);
   const [isNewOption, setIsNewOption] = useState(false);
@@ -115,7 +114,12 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
       <InputHeader error={error} label={label} />
       <div role='none'>
         {options && (
-          <List.Root items={options} isItem={(item) => true} onMove={handleMove}>
+          <List.Root
+            items={options}
+            isItem={(item) => true}
+            onMove={disabled ? undefined : handleMove}
+            readonly={disabled}
+          >
             {({ items }) => (
               <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
@@ -123,26 +127,30 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={['p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
-                        <List.ItemDragHandle />
+                        <List.ItemDragHandle disabled={disabled} />
                         <List.ItemTitle onClick={() => handleClick(item.id)} classNames='flex-1'>
                           {/* TODO(ZaymonFC): Move spacer into Tag component. */}
                           <Tag palette={item.color as ChromaticPalette}>{item.title || '\u200b'}</Tag>
                         </List.ItemTitle>
-                        <Icon
+                        <IconButton
+                          iconOnly
+                          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)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='mis-4 mbs-2 flex flex-col gap-1'>
+                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
                           {/* 16px to match drag handle width. */}
                           <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='flex flex-row items-center gap-1'>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
                             <Input.TextInput
+                              disabled={disabled}
                               placeholder={t('select option label placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
@@ -151,14 +159,9 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                               classNames='flex-1'
                               data-no-submit
                             />
-                            <Toolbar.Root classNames='p-0 m-0 !is-auto'>
-                              <HuePicker
-                                value={item.color}
-                                onChange={handleColorChange(item.id)}
-                                rootVariant='toolbar-button'
-                              />
-                            </Toolbar.Root>
+                            <HuePicker disabled={disabled} value={item.color} onChange={handleColorChange(item.id)} />
                             <IconButton
+                              disabled={disabled}
                               icon='ph--trash--fill'
                               iconOnly
                               label={t('select option delete')}
@@ -170,18 +173,14 @@ export const SelectOptionInput = ({ type, label, disabled, getStatus, getValue,
                     </List.Item>
                   </div>
                 ))}
-                <div role='listitem'>
-                  <div
-                    role='button'
-                    className={mx('p-1 plb-2', 'flex flex-col', 'cursor-pointer', 'hover:bg-hoverOverlay')}
-                    onClick={handleAdd}
-                  >
-                    <div className='flex items-center gap-1'>
-                      <Icon icon='ph--plus--regular' />
-                      <span className='text-sm'>{t('select option add')}</span>
-                    </div>
-                  </div>
-                </div>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--plus--regular'
+                  label={t('select option add')}
+                  onClick={handleAdd}
+                  disabled={disabled}
+                  classNames='is-full'
+                />
               </div>
             )}
           </List.Root>

package/src/components/Form/factory.tsx

@@ -5,9 +5,9 @@
 import { FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
+import { GeoPointInput } from './custom';
 import { BooleanInput, MarkdownInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
-import { GeoPointInput } from './custom';
 
 /**
  * Get property input component.

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,20 +6,21 @@ import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Obj, Type } from '@dxos/echo';
-import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
+import { type EchoSchema, Format, TypedObject, toJsonSchema } from '@dxos/echo-schema';
 import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { DataType, ProjectionModel, createView } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -3,15 +3,16 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { EchoSchema, isInstanceOf } from '@dxos/echo-schema';
 import { DataType, ProjectionModel } from '@dxos/schema';
 
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
@@ -41,7 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('Typename')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -140,7 +141,7 @@ describe('ViewEditor', () => {
     // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');
-    const deleteButton = propertyRow?.querySelector('button:last-child');
+    const deleteButton = propertyRow?.querySelector('[data-testid="field.delete"]');
 
     if (!deleteButton) {
       throw new Error('Delete button not found');