@dxos/react-ui-form 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/src/components/Settings/SettingsSelectField.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Select } from '@dxos/react-ui';
+
+import { type SettingsFieldProps } from './SettingsFieldSet';
+
+export type SelectFieldOption = {
+  value: string;
+  label?: string;
+};
+
+export type CreateSelectFieldOptions = {
+  /** Options to display. Strings are used as both value and label. */
+  options: ReadonlyArray<string | SelectFieldOption>;
+  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
+  defaultLabel?: string | null;
+};
+
+/**
+ * Factory for a `SettingsFieldSet` `fieldMap` entry that renders a Select control
+ * over a fixed list of options, with an optional sentinel for `undefined`.
+ */
+export const createSelectField = ({
+  options,
+  defaultLabel = 'Default',
+}: CreateSelectFieldOptions): React.FC<SettingsFieldProps<string | undefined>> => {
+  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
+  const hasDefault = defaultLabel !== null;
+  // Per-instance sentinel avoids collisions with real option values; empty string when the
+  // sentinel is omitted so `undefined` maps to a value Select.Root treats as "no selection".
+  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : '';
+
+  return ({ value, onChange, readonly }) => (
+    <Select.Root
+      disabled={readonly}
+      value={value ?? sentinel}
+      onValueChange={(next) => onChange(hasDefault && next === sentinel ? undefined : next)}
+    >
+      <Select.TriggerButton disabled={readonly} />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
+            {normalized.map((option) => (
+              <Select.Option key={option.value} value={option.value}>
+                {option.label ?? option.value}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/components/Settings/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './Settings';
+export { type SettingsFieldMap, type SettingsFieldProps, type SettingsFieldSetProps } from './SettingsFieldSet';
+export { createSelectField, type CreateSelectFieldOptions, type SelectFieldOption } from './SettingsSelectField';

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

@@ -16,9 +16,9 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
-import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { translations } from '#translations';
 
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
@@ -36,9 +36,9 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<View.View>();
@@ -91,8 +91,8 @@ const DefaultStory = (props: StoryProps) => {
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
         const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
-        Obj.change(view, (v) => {
-          v.query.ast = query.ast as Mutable<typeof query.ast>;
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
         });
 
         const typename = getTypenameFromQuery(query.ast);
@@ -105,13 +105,13 @@ const DefaultStory = (props: StoryProps) => {
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        Obj.change(view, (v) => {
-          v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
         });
         setSchema(() => newSchema);
       } else {
-        Obj.change(view, (v) => {
-          v.query.ast = newQuery as Mutable<typeof newQuery>;
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
         });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }

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

@@ -11,7 +11,6 @@ import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
 import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 

package/src/components/ViewEditor/ViewEditor.tsx

@@ -26,7 +26,8 @@ import {
 } from '@dxos/schema';
 import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { FieldEditor } from '../FieldEditor';
 import {
   Form,
@@ -189,11 +190,11 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     );
 
     return (
-      <div role='none' className={mx(classNames)}>
+      <div className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
           <Message.Root valence='info' classNames='my-form-padding'>
-            <Message.Title>{t('system schema description')}</Message.Title>
+            <Message.Title>{t('system-schema.description')}</Message.Title>
           </Message.Root>
         )}
 
@@ -201,7 +202,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} db={db} onValuesChanged={handleUpdate}>
           <Form.FieldSet />
 
-          <FormFieldLabel label={t('fields label')} asChild />
+          <FormFieldLabel label={t('fields.label')} asChild />
           <FieldList
             schema={schema}
             view={view}
@@ -274,12 +275,12 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      Obj.change(view, (v) => {
+      Obj.update(view, (view) => {
         // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-        const fields = [...v.projection.fields];
+        const fields = [...view.projection.fields];
         const [moved] = fields.splice(fromIndex, 1);
         fields.splice(toIndex, 0, moved);
-        v.projection.fields = fields;
+        view.projection.fields = fields;
       });
     },
     [view, readonly],
@@ -317,7 +318,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     >
       {({ items: fields }) => (
         <>
-          {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
+          {showHeading && <h3 className='text-sm'>{t('field-path.label')}</h3>}
           <div role='list' className='grid grid-cols-[min-content_1fr_min-content_min-content_min-content]'>
             {fields?.map((field) => {
               const hidden = field.visible === false;
@@ -329,7 +330,6 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                   aria-expanded={expandedField === field.id}
                 >
                   <div
-                    role='none'
                     className={mx(
                       subtleHover,
                       'grid grid-cols-subgrid col-span-5',
@@ -341,7 +341,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                       {field.path}
                     </List.ItemTitle>
                     <List.ItemIconButton
-                      label={t(hidden ? 'show field label' : 'hide field label')}
+                      label={t(hidden ? 'show-field.label' : 'hide-field.label')}
                       data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
                       icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
                       autoHide={false}
@@ -351,7 +351,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     {!readonly && (
                       <>
                         <List.ItemDeleteButton
-                          label={t('delete field label')}
+                          label={t('delete-field.label')}
                           autoHide={false}
                           disabled={readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1}
                           onClick={() => handleDelete(field.id)}
@@ -360,7 +360,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                         <List.ItemIconButton
                           iconOnly
                           variant='ghost'
-                          label={t('toggle expand label', { ns: osTranslations })}
+                          label={t('toggle-expand.label', { ns: osTranslations })}
                           icon={expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleToggleField(field)}
                           data-testid='field.toggle'
@@ -369,7 +369,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-5 mt-1 mb-1 border border-separator rounded-md'>
+                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -384,10 +384,10 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
             })}
           </div>
           {!readonly && !expandedField && (
-            <div role='none' className='my-form-padding'>
+            <div className='my-form-padding'>
               <IconButton
                 icon='ph--plus--regular'
-                label={t('add property button label')}
+                label={t('add-property-button.label')}
                 onClick={handleAdd}
                 disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
                 classNames='w-full'

package/src/components/index.ts

@@ -4,6 +4,8 @@
 
 export * from './FieldEditor';
 export * from './Form';
+export * from './ObjectForm';
 export * from './ObjectPicker';
+export * from './ObjectProperties';
 export * from './Settings';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -5,17 +5,24 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx, textBlockWidth } from '@dxos/ui-theme';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { composableProps, slottable } from '@dxos/ui-theme';
 
-type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
+type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
-export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+export const TestLayout = ({ children, json }: TestLayoutProps) => {
   return (
-    <div className='w-full h-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
-      <TestPanel classNames={['flex flex-col h-full overflow-y-auto', classNames]}>{children}</TestPanel>
-      <TestPanel classNames={'overflow-hidden'}>
-        <JsonFilter testId='debug' data={json} classNames='h-full text-xs' />
+    <div className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
+      <TestPanel>{children}</TestPanel>
+      <TestPanel>
+        <Syntax.Root data={json}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code testId='debug' classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       </TestPanel>
     </div>
   );
@@ -23,14 +30,15 @@ export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-const TestPanel = ({ classNames, children }: TestPanelProps) => {
+const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
   return (
-    <div role='none' className={mx(['h-full bg-modal-surface rounded-md', textBlockWidth, classNames])}>
+    <div {...composableProps({ classNames: 'dx-container bg-modal-surface rounded-md' })} ref={forwardedRef}>
       {children}
     </div>
   );
-};
+});
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
 export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');
+export const OBJECT_PROPERTIES_DEBUG_SYMBOL = Symbol('objectPropertiesDebug');

package/src/hooks/useKeyHandler.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCallback, useEffect } from 'react';
+import { type RefObject, useCallback, useLayoutEffect } from 'react';
 
 import { addEventListener } from '@dxos/async';
 
@@ -11,7 +11,7 @@ import { type FormHandler } from './useFormHandler';
 /**
  * Key handler.
  */
-export const useKeyHandler = (formElement: HTMLDivElement | null, form: FormHandler<any>) => {
+export const useKeyHandler = (elRef: RefObject<HTMLDivElement | null>, form: FormHandler<any>) => {
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
@@ -26,12 +26,12 @@ export const useKeyHandler = (formElement: HTMLDivElement | null, form: FormHand
     [form.isValid, form.canSave, form.onSave, form.autoSave],
   );
 
-  useEffect(() => {
-    if (!formElement) {
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) {
       return;
     }
 
-    // TODO(burdon): Move to @dxos/dom-util.
-    return addEventListener(formElement, 'keydown', handleKeyDown);
-  }, [formElement, handleKeyDown]);
+    return addEventListener(el, 'keydown', handleKeyDown);
+  }, [elRef, handleKeyDown]);
 };

package/src/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './util';
-
-export { translations };

package/src/translations.ts

@@ -10,79 +10,82 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'fields label': 'Fields',
-        'hidden fields label': 'Hidden Fields',
-        'empty readonly ref field label': '(none)',
+        'fields.label': 'Fields',
+        'hidden-fields.label': 'Hidden Fields',
+        'empty-readonly-ref-field.label': '(none)',
 
-        // TODO(burdon): Standardize field/property.
-        'add property button label': 'Add property',
-        'field property label': 'Property',
-        'field property placeholder': 'Property name',
-        'field format label': 'Type',
-        'field path label': 'Field path',
-        'add field': 'Add field',
-        'delete field': 'Delete field',
-        'field limit reached': 'Maximum number of fields reached',
-        'boolean input true value': 'Yes',
-        'boolean input false value': 'No',
-        'show field label': 'Show field',
-        'hide field label': 'Hide field',
-        'delete field label': 'Delete field',
-        'ref field combobox input placeholder': 'Search…',
-        'ref field placeholder_one': 'Select…',
-        'ref field placeholder_other': 'Select items…',
+        'field-property.label': 'Property',
+        'field-property.placeholder': 'Property name',
+        'field-format.label': 'Type',
+        'field-path.label': 'Field path',
 
-        'example placeholder': 'Example',
-        'latitude placeholder': 'Latitude (e.g., 40.7128)',
-        'longitude placeholder': 'Longitude (e.g., -74.0060)',
+        'add-item.button': 'Add item',
+        'add-property-button.label': 'Add property',
+        'boolean-input-true.value': 'Yes',
+        'boolean-input-false.value': 'No',
+        'show-field.label': 'Show field',
+        'hide-field.label': 'Hide field',
+        'delete-field.label': 'Delete field',
+        'create-option.label': 'Create',
+        'add-tag.label': 'Add tag',
 
-        'cancel button label': 'Cancel',
-        'save button label': 'Save',
+        'ref-field-combobox-input.placeholder': 'Search…',
+        'ref-field.placeholder': 'Select…',
+        'ref-field.placeholder_one': 'Select…',
+        'ref-field.placeholder_other': 'Select items…',
 
-        // FormatEnum
-        'format boolean': 'Boolean',
-        'format currency': 'Currency',
-        'format date': 'Date',
-        'format date-time': 'DateTime',
-        'format did': 'DID',
-        'format duration': 'Duration',
-        'format dxn': 'DXN',
-        'format email': 'Email',
-        'format formula': 'Formula',
-        'format hostname': 'Hostname',
-        'format integer': 'Integer',
-        'format json': 'JSON',
-        'format lnglat': 'Geopoint',
-        'format markdown': 'Markdown',
-        'format percent': 'Percent',
-        'format ref': 'Reference',
-        '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',
+        'example.placeholder': 'Example',
+        'latitude.placeholder': 'Latitude (e.g., 40.7128)',
+        'longitude.placeholder': 'Longitude (e.g., -74.0060)',
+
+        'cancel-button.label': 'Cancel',
+        'save-button.label': 'Save',
+        'create-text.label': 'Create text',
+
+        // TypeFormat
+        'format.boolean.label': 'Boolean',
+        'format.currency.label': 'Currency',
+        'format.date.label': 'Date',
+        'format.date-time.label': 'DateTime',
+        'format.did.label': 'DID',
+        'format.duration.label': 'Duration',
+        'format.dxn.label': 'DXN',
+        'format.email.label': 'Email',
+        'format.formula.label': 'Formula',
+        'format.hostname.label': 'Hostname',
+        'format.integer.label': 'Integer',
+        'format.json.label': 'JSON',
+        'format.lnglat.label': 'Geopoint',
+        'format.markdown.label': 'Markdown',
+        'format.percent.label': 'Percent',
+        'format.ref.label': 'Reference',
+        'format.regex.label': 'RegExp',
+        'format.string.label': 'String',
+        'format.single-select.label': 'Select',
+        'format.multi-select.label': 'Multi-select',
+        'format.text.label': 'Long text',
+        'format.time.label': 'Time',
+        'format.timestamp.label': 'Timestamp',
+        'format.user.label': 'User',
+        'format.number.label': 'Number',
+        'format.uri.label': 'URI',
+        'format.url.label': 'URL',
+        'format.uuid.label': 'UUID',
 
         // GeoPointField.
-        'latitude label': 'Latitude',
-        'longitude label': 'Longitude',
+        'latitude.label': 'Latitude',
+        'longitude.label': 'Longitude',
 
         // SelectOptionsField.
-        'select option label': 'Label',
-        'select option label placeholder': 'Option label',
-        'select option color': 'Color',
-        'select option delete': 'Delete',
-        'select option add': 'Add option',
+        'select-option.label': 'Label',
+        'select-option-label.placeholder': 'Option label',
+        'select-option-delete.button': 'Delete',
+        'select-option-add.button': 'Add option',
 
         // System schema message.
-        'system schema title': 'System type',
-        'system schema description': 'System type: cannot add or remove fields.',
+        'system-schema.title': 'System type',
+        'system-schema.description': 'System type: cannot add or remove fields.',
+        'remove.button': 'Remove',
       },
     },
   },

package/src/util/field-type.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { getAnnotation, isLiteralUnion } from '@dxos/effect';
+
+/**
+ * Detected field type for a schema property.
+ */
+export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
+
+export type SelectOption = {
+  value: string | number;
+  label?: string;
+};
+
+/**
+ * Detect the field type from an Effect Schema AST node.
+ */
+export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefined => {
+  if (isLiteralUnion(ast)) {
+    return 'select';
+  }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return 'struct';
+  }
+
+  switch (ast._tag) {
+    case 'BooleanKeyword':
+      return 'boolean';
+    case 'StringKeyword':
+      return 'string';
+    case 'NumberKeyword':
+      return 'number';
+  }
+
+  return undefined;
+};
+
+/**
+ * Extract select options from a literal union AST node.
+ * Reads title annotations from individual literals for labels.
+ */
+export const getSelectOptionsFromAst = (ast: SchemaAST.AST): SelectOption[] | undefined => {
+  if (!isLiteralUnion(ast)) {
+    return undefined;
+  }
+
+  return (ast as SchemaAST.Union<SchemaAST.Literal>).types.flatMap((literalNode) => {
+    const value = literalNode.literal;
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      return [];
+    }
+    const title = getAnnotation<string>(SchemaAST.TitleAnnotationId, false)(literalNode);
+    const label = title ?? (typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : String(value));
+    return [{ value, label }];
+  });
+};

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './field';
+export * from './field-type';
 export * from './formatting';
 export * from './properties';
 export * from './refs';

package/src/util/refs.ts

@@ -5,11 +5,13 @@
 import type * as SchemaAST from 'effect/SchemaAST';
 
 import { Ref } from '@dxos/echo';
-import { getArrayElementType, isArrayType } from '@dxos/effect';
+import { type ReferenceAnnotationValue, ReferenceAnnotationId } from '@dxos/echo/internal';
+import { findAnnotation, getArrayElementType, isArrayType } from '@dxos/effect';
 
 type RefProps = {
   ast: SchemaAST.AST;
   isArray: boolean;
+  typename?: string;
 };
 
 export const getRefProps = (ast: SchemaAST.AST): RefProps | undefined => {
@@ -18,14 +20,16 @@ export const getRefProps = (ast: SchemaAST.AST): RefProps | undefined => {
     const elementType = getArrayElementType(ast);
     if (elementType) {
       if (Ref.isRefType(elementType)) {
-        return { ast: elementType, isArray: true };
+        const typename = findAnnotation<ReferenceAnnotationValue>(elementType, ReferenceAnnotationId)?.typename;
+        return { ast: elementType, isArray: true, typename };
       }
     }
   }
 
   // Direct reference.
   if (Ref.isRefType(ast)) {
-    return { ast, isArray: false };
+    const typename = findAnnotation<ReferenceAnnotationValue>(ast, ReferenceAnnotationId)?.typename;
+    return { ast, isArray: false, typename };
   }
 
   return undefined;