@dxos/react-ui-form 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/src/components/ViewEditor/ViewEditor.tsx

@@ -6,32 +6,23 @@ import * as Array from 'effect/Array';
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
+import { QueryAST } from '@dxos/echo';
 import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
-import { type SchemaRegistry } from '@dxos/echo-db';
+import { Filter, Query, type SchemaRegistry } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import {
-  Callout,
-  IconButton,
-  Input,
-  type ThemedClassName,
-  useDensityContext,
-  useElevationContext,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
-import { Editor, createBasicExtensions, createThemeExtensions } from '@dxos/react-ui-editor';
+import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
 import { cardSpacing } from '@dxos/react-ui-stack';
-import { inputTheme } from '@dxos/react-ui-theme';
 import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
 import {
-  type DataType,
   FieldSchema,
   type FieldType,
   ProjectionModel,
   VIEW_FIELD_LIMIT,
+  type View,
   getTypenameFromQuery,
 } from '@dxos/schema';
 
@@ -45,14 +36,15 @@ const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
-    view: DataType.View;
-    mode?: 'schema' | 'query';
+    view: View.View;
+    mode?: 'schema' | 'tag';
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
-    onQueryChanged?: (query: string, target?: string) => void;
+    onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<FormProps<any>, 'outerSpacing'>
+  } & Pick<FormProps<any>, 'outerSpacing'> &
+    Pick<QueryFormProps, 'types' | 'tags'>
 >;
 
 /**
@@ -68,6 +60,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       registry,
       readonly,
       showHeading = false,
+      types,
+      tags,
       onQueryChanged,
       onDelete,
       outerSpacing = true,
@@ -84,18 +78,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
     const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
-    const serializedQuery = Match.value(mode).pipe(
-      Match.when('schema', () => getTypenameFromQuery(view.query.ast)),
-      Match.when('query', () => {
-        if (view.query.string) {
-          return view.query.string;
-        } else {
-          return 'Serializing query AST is not currently supported.';
-        }
-      }),
-      Match.exhaustive,
-    );
-
     const queueTarget = Match.value(view.query.ast).pipe(
       Match.when({ type: 'options' }, ({ options }) => {
         return Option.fromNullable(options.queues).pipe(
@@ -111,12 +93,11 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         query:
           mode === 'schema'
             ? Format.URL.annotations({ title: 'Record type' })
-            : Schema.String.annotations({ title: 'Query' }),
+            : QueryAST.Query.annotations({ title: 'Query' }),
       });
 
-      if (mode === 'query') {
+      if (mode === 'tag') {
         return Schema.Struct({
-          name: Schema.optional(Schema.String.annotations({ title: 'Name' })),
           ...base.fields,
           target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
         }).pipe(Schema.mutable);
@@ -124,11 +105,15 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
 
       return base.pipe(Schema.mutable);
     }, [mode]);
+
     // TODO(burdon): Need to warn user of possible consequences of editing.
     // TODO(burdon): Settings should have domain name owned by user.
     const viewValues = useMemo(
-      () => ({ name: view.name, query: serializedQuery, target: queueTarget }),
-      [view.name, serializedQuery, queueTarget],
+      () => ({
+        query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+        target: queueTarget,
+      }),
+      [mode, view.query.ast, queueTarget],
     );
 
     const handleToggleField = useCallback(
@@ -147,23 +132,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     }, [schema, projectionModel, readonly]);
 
     const handleUpdate = useCallback(
-      (values: Schema.Schema.Type<typeof viewSchema>) => {
-        invariant(!readonly);
+      (values: any) => {
         requestAnimationFrame(() => {
-          if ('name' in values && view.name !== values.name) {
-            view.name = values.name;
-          }
-
-          const queryChanged = serializedQuery !== values.query;
-          const targetValue = 'target' in values ? values.target : undefined;
-          const targetChanged = 'target' in values && values.target && queueTarget !== targetValue;
-
-          if ((queryChanged || targetChanged) && !readonly) {
-            onQueryChanged?.(values.query, targetValue);
-          }
+          const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
+          onQueryChanged?.(query, values.target);
         });
       },
-      [serializedQuery, onQueryChanged, readonly, view, queueTarget],
+      [onQueryChanged, view, queueTarget, mode],
     );
 
     const handleDelete = useCallback(
@@ -208,9 +183,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [projectionModel],
     );
 
+    const custom = useMemo(() => (mode === 'tag' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
+
     return (
       <div role='none' className={mx(classNames)}>
-        {schemaReadonly && mode === 'schema' && (
+        {/* If readonlyProp is set, then the callout is not needed. */}
+        {schemaReadonly && !readonly && (
           <Callout.Root valence='info' classNames={['mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}>
             <Callout.Title>{t('system schema description')}</Callout.Title>
           </Callout.Root>
@@ -222,10 +200,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           autoSave
           schema={viewSchema}
           values={viewValues}
-          readonly={readonly ? 'disabled-input' : false}
           onSave={handleUpdate}
           outerSpacing={outerSpacing}
-          Custom={mode === 'query' ? customFields : undefined}
+          Custom={custom}
         />
 
         <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
@@ -255,7 +232,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                           role='none'
                           className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}
                         >
-                          <List.ItemDragHandle disabled={readonly} />
+                          <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                           <List.ItemTitle
                             classNames={hidden && 'text-subdued'}
                             onClick={() => handleToggleField(field)}
@@ -270,7 +247,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                             disabled={readonly || (!hidden && projectionModel.fields.length <= 1)}
                             onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
                           />
-                          {mode === 'schema' && (
+                          {!readonly && (
                             <>
                               <List.ItemDeleteButton
                                 label={t('delete field label')}
@@ -291,7 +268,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
                             </>
                           )}
                         </div>
-                        {expandedField === field.id && mode === 'schema' && (
+                        {expandedField === field.id && !readonly && (
                           <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
                             <FieldEditor
                               readonly={readonly || schemaReadonly ? 'disabled-input' : false}
@@ -311,11 +288,11 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           </List.Root>
         </div>
 
-        {!readonly && !expandedField && mode === 'schema' && (
+        {!readonly && !expandedField && (
           <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
             <IconButton
               icon='ph--plus--regular'
-              label={t('button add property')}
+              label={t('add property button label')}
               onClick={readonly ? undefined : handleAdd}
               // TODO(burdon): Show field limit in ux (not tooltip).
               disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
@@ -328,51 +305,18 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
   },
 );
 
-const customFields: Record<string, InputComponent> = {
+const customFields = ({ types, tags }: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, InputComponent> => ({
   query: (props: InputProps) => {
-    const { themeMode } = useThemeContext();
-    const { t } = useTranslation(translationKey);
-    const density = useDensityContext();
-    const elevation = useElevationContext();
-
-    const onValueChange = useRef(props.onValueChange);
-    useEffect(() => {
-      onValueChange.current = props.onValueChange;
-    }, [props.onValueChange]);
-    // NOTE: Including props.onValueChange in deps causes infinite loop with Editor.
-    const handleChange = useCallback((text: string) => onValueChange.current('string', text), []);
-
-    const extensions = useMemo(
-      () => [createBasicExtensions({ placeholder: t('query placeholder') }), createThemeExtensions({ themeMode })],
-      [],
+    const handleChange = useCallback(
+      (query: Query.Any) => props.onValueChange('object', query.ast),
+      [props.onValueChange],
     );
 
-    // TODO(wittjosiah): This is probably not the right way to do these styles.
     return (
       <Input.Root>
         <InputHeader label={props.label} />
-        <Editor
-          classNames={mx(
-            inputTheme.input({ density, elevation }),
-            'flex items-center',
-            'focus-within:bg-focusSurface focus-within:border-separator focus-within:hover:bg-focusSurface',
-          )}
-          extensions={extensions}
-          value={props.getValue()}
-          onChange={handleChange}
-        />
-        {/* TODO(wittjosiah): Support query editor.
-        <QueryEditor
-          classNames={mx(
-            inputTheme.input({ density, elevation }),
-            'flex items-center',
-            'focus-within:bg-focusSurface focus-within:border-separator focus-within:hover:bg-focusSurface',
-          )}
-          space={space}
-          value={props.getValue()}
-          onChange={handleChange}
-        /> */}
+        <QueryForm initialQuery={props.getValue()} types={types} tags={tags} onChange={handleChange} />
       </Input.Root>
     );
   },
-};
+});

package/src/hooks/useForm.ts

@@ -6,7 +6,7 @@ import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, getValue, setValue } from '@dxos/echo/internal';
+import { type AnyProperties, getValue, setValue } from '@dxos/echo/internal';
 import { type JsonPath, type SimpleType, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
@@ -16,7 +16,7 @@ import { type MaybePromise } from '@dxos/util';
 /**
  * Return type from `useForm` hook.
  */
-export type FormHandler<T extends BaseObject> = {
+export type FormHandler<T extends AnyProperties> = {
   //
   // Form state management.
   //
@@ -44,7 +44,7 @@ export type FormHandler<T extends BaseObject> = {
 /**
  * Hook options.
  */
-export interface FormOptions<T extends BaseObject> {
+export interface FormOptions<T extends AnyProperties> {
   /**
    * Effect schema (Type literal).
    */
@@ -85,7 +85,7 @@ export interface FormOptions<T extends BaseObject> {
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export const useForm = <T extends BaseObject>({
+export const useForm = <T extends AnyProperties>({
   schema,
   initialValues,
   onValuesChanged,
@@ -220,12 +220,13 @@ export const useForm = <T extends BaseObject>({
 
       const newValues = { ...setValue(values, jsonPath, parsedValue) };
       setValues(newValues);
-      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+      const newChanged = { ...changed, [jsonPath]: true };
+      setChanged(newChanged);
       onValuesChanged?.(newValues);
 
       const isValid = validate(newValues);
       if (isValid && onValid) {
-        onValid(newValues, { changed });
+        onValid(newValues, { changed: newChanged });
       }
     },
     [values, onValuesChanged, validate, onValid, changed],
@@ -275,7 +276,7 @@ export const useForm = <T extends BaseObject>({
   );
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
+const createKeySet = <T extends AnyProperties, V>(obj: T, value: V): Record<JsonPath, V> => {
   invariant(obj);
   return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
 };

package/src/hooks/useQueryRefOptions.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { type TypeAnnotation } from '@dxos/echo/internal';
 import { type DXN } from '@dxos/keys';
@@ -25,9 +25,12 @@ type UseQueryRefOptionsProps = { refTypeInfo: TypeAnnotation | undefined; onQuer
  * Hook to query reference options based on type information.
  * Used internally within forms to fetch and format reference options for reference fields.
  */
+// TODO(wittjosiah): This should be a reactive query so that the options are always up to date.
 export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
   const [options, setOptions] = useState<QueryTag[]>([]);
   const [loading, setLoading] = useState(false);
+  const [state, setState] = useState({});
+  const update = useCallback(() => setState({}), []);
 
   useEffect(() => {
     if (!refTypeInfo || !onQueryRefOptions) {
@@ -53,7 +56,7 @@ export const useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }: UseQueryR
     };
 
     void fetchOptions();
-  }, [refTypeInfo, onQueryRefOptions]);
+  }, [refTypeInfo, onQueryRefOptions, state]);
 
-  return { options, loading };
+  return { options, update, loading };
 };

package/src/hooks/useRefQueryLookupHandler.ts

@@ -4,7 +4,8 @@
 
 import { useCallback } from 'react';
 
-import { type TypeAnnotation, getObjectDXN } from '@dxos/echo/internal';
+import { Obj } from '@dxos/echo';
+import { type TypeAnnotation } from '@dxos/echo/internal';
 import { Filter, type Space } from '@dxos/react-client/echo';
 import { isNonNullable } from '@dxos/util';
 
@@ -18,18 +19,17 @@ export const useRefQueryLookupHandler = ({ space }: UseRefQueryLookupProps): Que
       if (!space) {
         return [];
       }
+
       const query = space.db.query(Filter.typename(typeInfo.typename));
       const { objects } = await query.run();
-
       return objects
         .map((object) => {
-          const dxn = getObjectDXN(object);
+          const dxn = Obj.getDXN(object);
           if (!dxn) {
             return undefined;
           }
 
-          // TODO(Zaymon): Better fallback object names?
-          const item = { dxn, label: object?.name ?? object?.id ?? '' };
+          const item = { dxn, label: Obj.getLabel(object) ?? object?.id ?? '' };
           return item;
         })
         .filter(isNonNullable);

package/src/translations.ts

@@ -15,7 +15,7 @@ export const translations = [
         'empty readonly ref field label': '(none)',
 
         // TODO(burdon): Standardize field/property.
-        'button add property': 'Add property',
+        'add property button label': 'Add property',
         'field property label': 'Property',
         'field property placeholder': 'Property name',
         'field format label': 'Type',
@@ -33,8 +33,8 @@ export const translations = [
         'ref field placeholder_other': 'Select items…',
 
         // TODO(burdon): Factor out?
-        'button cancel': 'Cancel',
-        'button save': 'Save',
+        'cancel button label': 'Cancel',
+        'save button label': 'Save',
 
         // FormatEnum
         'format boolean': 'Boolean',
@@ -78,9 +78,9 @@ export const translations = [
         'select option add': 'Add option',
 
         // System schema message.
-        'system schema title': 'System record type',
+        'system schema title': 'System type',
         'system schema description':
-          'This is a system record type and cannot be modified, though the view can still be configured.',
+          'This is a system type and cannot be modified, though the view can still be configured.',
       },
     },
   },

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
+import { Format, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -13,7 +13,7 @@ import { type ValidationError } from '@dxos/schema';
  */
 export type ParseProps = {
   type?: TypeEnum;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
   value: any;
 };
 
@@ -57,31 +57,31 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
   }
 
   switch (format) {
-    case FormatEnum.Boolean:
+    case Format.TypeFormat.Boolean:
       return parseScalar(TypeEnum.Boolean);
 
-    case FormatEnum.Number:
-    case FormatEnum.Percent:
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
       return parseScalar(TypeEnum.Number);
 
-    case FormatEnum.String:
-    case FormatEnum.Markdown: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
       return parseScalar(TypeEnum.String);
     }
 
-    case FormatEnum.Ref:
-      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
 
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp: {
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
       const date = new Date(value as string | number);
       return isNaN(date.getTime()) ? null : date;
     }
 
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
       if (typeof value === 'string') {
         // Only keep digits, decimal points, minus signs, and commas.
@@ -108,23 +108,23 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
 // TODO(burdon): Type and format.
 export type CellClassesForFieldTypeProps = {
   type?: TypeEnum;
-  format?: FormatEnum;
+  format?: Format.TypeFormat;
 };
 
 export const cellClassesForFieldType = ({ type, format }: CellClassesForFieldTypeProps): string[] | undefined => {
   switch (format || type) {
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return undefined;
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp:
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Duration:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
       return ['font-mono', 'text-right'];
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Currency:
       return ['text-right'];
-    case FormatEnum.JSON:
-    case FormatEnum.DID:
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
       return ['font-mono'];
     case TypeEnum.Number:
     case TypeEnum.Boolean:

package/src/util/formatting.ts

@@ -4,11 +4,11 @@
 
 import { format as formatDate } from 'date-fns/format';
 
-import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo/internal';
+import { Format, GeoLocation, TypeEnum } from '@dxos/echo/internal';
 
 type ValueFormatProps = {
   type: TypeEnum;
-  format?: FormatEnum | undefined;
+  format?: Format.TypeFormat | undefined;
   value: any;
   locale?: string | undefined;
 };
@@ -41,20 +41,20 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
   }
 
   switch (format) {
-    case FormatEnum.Boolean: {
+    case Format.TypeFormat.Boolean: {
       return formatScalar(TypeEnum.Boolean);
     }
-    case FormatEnum.Number: {
+    case Format.TypeFormat.Number: {
       return formatScalar(TypeEnum.Number);
     }
-    case FormatEnum.String:
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Ref: {
       return formatScalar(TypeEnum.String);
     }
-    case FormatEnum.Percent: {
+    case Format.TypeFormat.Percent: {
       return `${(value as number) * 100}%`;
     }
-    case FormatEnum.Currency: {
+    case Format.TypeFormat.Currency: {
       // TODO(burdon): Get from property annotation.
       return (value as number).toLocaleString(locale, {
         style: 'currency',
@@ -63,28 +63,28 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         maximumFractionDigits: 2,
       });
     }
-    case FormatEnum.Date: {
+    case Format.TypeFormat.Date: {
       try {
         return formatDate(new Date(value as number), 'yyyy-MM-dd');
       } catch (error) {
         return 'Invalid Date';
       }
     }
-    case FormatEnum.Time: {
+    case Format.TypeFormat.Time: {
       try {
         return formatDate(new Date(value as number), 'HH:mm:ss');
       } catch (error) {
         return 'Invalid Time';
       }
     }
-    case FormatEnum.DateTime: {
+    case Format.TypeFormat.DateTime: {
       try {
         return formatDate(new Date(value as number), 'yyyy-MM-dd HH:mm:ss');
       } catch (error) {
         return 'Invalid DateTime';
       }
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       if (value === null || value === undefined) {
         return '';
       }
@@ -125,31 +125,31 @@ export const formatForEditing = ({ type, format, value, locale = undefined }: Va
   }
 
   switch (format) {
-    case FormatEnum.Boolean:
-    case FormatEnum.Number:
-    case FormatEnum.String:
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.Boolean:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Ref: {
       return formatScalar(type);
     }
-    case FormatEnum.Percent: {
+    case Format.TypeFormat.Percent: {
       return String(value * 100);
     }
-    case FormatEnum.Currency: {
+    case Format.TypeFormat.Currency: {
       return String(value);
     }
-    case FormatEnum.DateTime: {
+    case Format.TypeFormat.DateTime: {
       const date = new Date(value as number);
       return date.toISOString();
     }
-    case FormatEnum.Date: {
+    case Format.TypeFormat.Date: {
       const date = new Date(value as number);
       return date.toISOString().split('T')[0];
     }
-    case FormatEnum.Time: {
+    case Format.TypeFormat.Time: {
       const date = new Date(value as number);
       return date.toISOString().split('T')[1].split('.')[0];
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       // Handle null or undefined
       if (value === null || value === undefined) {
         return '';

package/src/util/refs.ts

@@ -4,7 +4,7 @@
 
 import type * as SchemaAST from 'effect/SchemaAST';
 
-import { FormatEnum, ReferenceAnnotationId } from '@dxos/echo/internal';
+import { Format, ReferenceAnnotationId } from '@dxos/echo/internal';
 import { findAnnotation } from '@dxos/effect';
 import { type SchemaProperty } from '@dxos/schema';
 
@@ -18,11 +18,6 @@ type RefProps = {
 export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined => {
   const { ast, format, array } = property;
 
-  // Direct reference.
-  if (format === FormatEnum.Ref) {
-    return { ast, isArray: false };
-  }
-
   // Array of references.
   if (array) {
     const elementType = findArrayElementType(ast);
@@ -34,5 +29,10 @@ export const getRefProps = (property: SchemaProperty<any>): RefProps | undefined
     }
   }
 
+  // Direct reference.
+  if (format === Format.TypeFormat.Ref) {
+    return { ast, isArray: false };
+  }
+
   return undefined;
 };