@dxos/react-ui-form 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/src/components/ViewEditor/ViewEditor.tsx

@@ -9,19 +9,18 @@ import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { Filter, Format, Obj, Query, QueryAST, type SchemaRegistry } from '@dxos/echo';
+import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { IconButton, Input, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
 import {
-  FieldSchema,
-  type FieldType,
+  ParentLabelAnnotation,
   ProjectionModel,
   VIEW_FIELD_LIMIT,
-  type View,
-  createDirectChangeCallback,
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
@@ -35,22 +34,20 @@ import {
   type FormFieldComponentProps,
   FormFieldLabel,
   type FormFieldMap,
+  type FormRootProps,
 } from '../Form';
 
-const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
-const listItemGrid = 'grid grid-cols-subgrid col-span-5';
-
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
     view: View.View;
     mode?: 'schema' | 'tag';
     registry?: SchemaRegistry.SchemaRegistry;
-    readonly?: boolean;
     showHeading?: boolean;
     onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<QueryFormProps, 'types' | 'tags'>
+  } & Pick<QueryFormProps, 'types' | 'tags'> &
+    Pick<FormRootProps<any>, 'readonly' | 'db'>
 >;
 
 /**
@@ -64,6 +61,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       view,
       mode = 'schema',
       registry,
+      db,
       readonly,
       showHeading = false,
       types,
@@ -81,11 +79,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       // Use reactive and mutable version of json schema when schema is mutable.
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
 
-      // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
-      const change =
-        schema instanceof EchoSchema
-          ? createEchoChangeCallback(view, schema)
-          : createDirectChangeCallback(view.projection, jsonSchema);
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
 
       const model = new ProjectionModel({
         registry: atomRegistry,
@@ -98,18 +94,31 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     }, [atomRegistry, schema, view]);
 
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
-    const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
     const queueTarget = Match.value(view.query.ast).pipe(
-      Match.when({ type: 'options' }, ({ options }) => {
-        return Option.fromNullable(options.queues).pipe(
+      Match.when({ type: 'from' }, ({ from }) => {
+        if (from._tag !== 'scope') {
+          return undefined;
+        }
+        return Option.fromNullable(from.scope.queues).pipe(
           Option.flatMap((queues) => Array.head(queues)),
+          Option.map(String),
           Option.getOrUndefined,
         );
       }),
       Match.orElse(() => undefined),
     );
 
+    const feeds = useQuery(db, Filter.type(Feed.Feed));
+
+    const targetRef = useMemo(() => {
+      if (!queueTarget) {
+        return undefined;
+      }
+      const feed = feeds.find((feed) => Feed.getQueueDxn(feed)?.toString() === queueTarget);
+      return feed ? Ref.fromDXN(Entity.getDXN(feed)) : undefined;
+    }, [queueTarget, feeds]);
+
     const viewSchema = useMemo(() => {
       const base = Schema.Struct({
         query:
@@ -121,7 +130,12 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       if (mode === 'tag') {
         return Schema.Struct({
           ...base.fields,
-          target: Schema.optional(Schema.String.annotations({ title: 'Target Queue' })),
+          // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+          target: Ref.Ref(Feed.Feed).pipe(
+            Schema.annotations({ title: 'Target Feed' }),
+            ParentLabelAnnotation.set(true),
+            Schema.optional,
+          ),
         }).pipe(Schema.mutable);
       }
 
@@ -133,9 +147,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const viewValues = useMemo(
       () => ({
         query: mode === 'schema' ? getTypenameFromQuery(view.query.ast) : view.query.ast,
-        target: queueTarget,
+        target: targetRef,
       }),
-      [mode, view.query.ast, queueTarget],
+      [mode, view.query.ast, targetRef],
     );
 
     const fieldMap = useMemo<FormFieldMap | undefined>(
@@ -143,49 +157,51 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [mode, types, tags],
     );
 
-    // TODO(burdon): Check if mutable.
-    const handleAdd = useCallback(() => {
-      invariant(!readonly);
-      const field = projectionModel.createFieldProjection();
-      setExpandedField(field.id);
-    }, [projectionModel, readonly]);
-
     const handleUpdate = useCallback(
       (values: any) => {
-        requestAnimationFrame(() => {
-          const query = mode === 'schema' ? Query.select(Filter.typename(values.query)).ast : values.query;
-          onQueryChanged?.(query, values.target);
-        });
+        const targetValue = values.target;
+        let queueDxn: string | undefined;
+
+        if (Ref.isRef(targetValue)) {
+          const feedDxn = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === feedDxn);
+          if (feed) {
+            queueDxn = Feed.getQueueDxn(feed)?.toString();
+          }
+        }
+
+        // TODO(wittjosiah): Deep-clone the AST to plain JS or ECHO proxy arrays become objects with numeric keys.
+        const query =
+          mode === 'schema'
+            ? Query.select(Filter.typename(values.query)).ast
+            : JSON.parse(JSON.stringify(values.query));
+        onQueryChanged?.(query, queueDxn);
       },
-      [onQueryChanged, view, queueTarget, mode],
+      [onQueryChanged, mode, feeds],
     );
 
     const handleDelete = useCallback(
       (fieldId: string) => {
         invariant(!readonly);
-        if (fieldId === expandedField) {
-          setExpandedField(undefined);
-        }
-
         onDelete?.(fieldId);
       },
-      [expandedField, onDelete, readonly],
+      [onDelete, readonly],
     );
 
     return (
       <div role='none' className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
-          <Callout.Root valence='info' classNames='mlb-cardSpacingBlock'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
+          <Message.Root valence='info' classNames='my-form-padding'>
+            <Message.Title>{t('system-schema.description')}</Message.Title>
+          </Message.Root>
         )}
 
         {/* TODO(burdon): Is the form read-only or just the schema? */}
-        <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} autoSave onSave={handleUpdate}>
+        <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}
@@ -195,19 +211,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
             onDelete={handleDelete}
           />
         </Form.Root>
-
-        {!readonly && !expandedField && (
-          <div role='none' className='mlb-cardSpacingBlock'>
-            <IconButton
-              icon='ph--plus--regular'
-              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}
-              classNames='is-full'
-            />
-          </div>
-        )}
       </div>
     );
   },
@@ -220,15 +223,16 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation(translationKey);
 
+  // Subscribe to view changes for reactivity.
+  const [viewSnapshot] = useObject(view);
+
   const projectionModel = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
 
-    // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
-    const change =
-      schema instanceof EchoSchema
-        ? createEchoChangeCallback(view, schema)
-        : createDirectChangeCallback(view.projection, jsonSchema);
+    // Always use createEchoChangeCallback since the view is ECHO-backed.
+    // Pass schema only when mutable to allow schema mutations.
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
 
     const model = new ProjectionModel({
       registry: atomRegistry,
@@ -240,10 +244,16 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     return model;
   }, [atomRegistry, schema, view]);
 
-  const [expandedField, setExpandedField] = useState<FieldType['id']>();
+  const [expandedField, setExpandedField] = useState<View.FieldType['id']>();
+
+  const handleAdd = useCallback(() => {
+    invariant(!readonly);
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [projectionModel, readonly]);
 
   const handleToggleField = useCallback(
-    (field: FieldType) => {
+    (field: View.FieldType) => {
       setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
     [readonly],
@@ -264,15 +274,15 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.projection.fields];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      Obj.change(view, (v) => {
-        v.projection.fields = fields;
+      Obj.change(view, (view) => {
+        // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+        const fields = [...view.projection.fields];
+        const [moved] = fields.splice(fromIndex, 1);
+        fields.splice(toIndex, 0, moved);
+        view.projection.fields = fields;
       });
     },
-    [view.projection.fields, readonly],
+    [view, readonly],
   );
 
   const handleClose = useCallback(() => setExpandedField(undefined), []);
@@ -293,33 +303,44 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     [projectionModel],
   );
 
+  if (!viewSnapshot) {
+    return null;
+  }
+
   return (
-    <List.Root<FieldType>
-      items={view.projection.fields as FieldType[]}
-      isItem={Schema.is(FieldSchema)}
+    <List.Root<View.FieldType>
+      items={viewSnapshot.projection.fields as View.FieldType[]}
+      isItem={Schema.is(View.FieldSchema)}
       getId={(field) => field.id}
       onMove={readonly ? undefined : handleMove}
       readonly={readonly}
     >
       {({ items: fields }) => (
         <>
-          {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
-          <div role='list' className={listGrid}>
+          {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;
               return (
-                <List.Item<FieldType>
+                <List.Item<View.FieldType>
                   key={field.id}
                   item={field}
-                  classNames={listItemGrid}
+                  classNames={'grid grid-cols-subgrid col-span-5'}
                   aria-expanded={expandedField === field.id}
                 >
-                  <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                  <div
+                    role='none'
+                    className={mx(
+                      subtleHover,
+                      'grid grid-cols-subgrid col-span-5',
+                      'rounded-xs cursor-pointer min-h-10',
+                    )}
+                  >
                     <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
-                    <List.ItemButton
+                    <List.ItemIconButton
                       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'}
@@ -330,16 +351,16 @@ 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 || view.projection.fields.length <= 1}
+                          disabled={readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1}
                           onClick={() => handleDelete(field.id)}
                           data-testid='field.delete'
                         />
-                        <IconButton
+                        <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'
@@ -348,7 +369,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
+                    <div role='none' className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -362,6 +383,17 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
               );
             })}
           </div>
+          {!readonly && !expandedField && (
+            <div role='none' className='my-form-padding'>
+              <IconButton
+                icon='ph--plus--regular'
+                label={t('add-property-button.label')}
+                onClick={handleAdd}
+                disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
+                classNames='w-full'
+              />
+            </div>
+          )}
         </>
       )}
     </List.Root>

package/src/components/index.ts

@@ -2,8 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ControlSection';
 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

@@ -4,19 +4,27 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { textBlockWidth } from '@dxos/ui-theme';
+import { Column, type ThemedClassName } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
 
 type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
 export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
   return (
-    <div className='is-full bs-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
-      <TestPanel classNames={['flex flex-col bs-full overflow-y-auto', classNames]}>{children}</TestPanel>
+    <div className='h-full w-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
+      <TestPanel classNames={['dx-container', classNames]}>
+        <Column.Root classNames='dx-container' gutter='sm'>
+          {children}
+        </Column.Root>
+      </TestPanel>
       <TestPanel classNames={'overflow-hidden'}>
-        <JsonFilter testId='debug' data={json} classNames='bs-full text-xs' />
+        <Json.Root data={json}>
+          <Json.Content classNames='h-full'>
+            <Json.Filter />
+            <Json.Data testId='debug' classNames='text-xs' />
+          </Json.Content>
+        </Json.Root>
       </TestPanel>
     </div>
   );
@@ -25,7 +33,11 @@ export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
 const TestPanel = ({ classNames, children }: TestPanelProps) => {
-  return <Card.Root classNames={['bs-full overflow-y-auto', textBlockWidth, classNames]}>{children}</Card.Root>;
+  return (
+    <div role='none' className={mx(['dx-document h-full bg-modal-surface rounded-md', classNames])}>
+      {children}
+    </div>
+  );
 };
 
 // Symbol for accessing debug objects in tests.

package/src/hooks/useFormHandler.ts

@@ -8,13 +8,7 @@ import type * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type AnyProperties } from '@dxos/echo/internal';
-import {
-  type JsonPath,
-  createJsonPath,
-  fromEffectValidationPath,
-  getValue as getValue$,
-  setValue as setValue$,
-} from '@dxos/effect';
+import { type JsonPath, createJsonPath, fromEffectValidationPath, getValue as getValue$ } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { useDefaultValue } from '@dxos/react-ui';
 import { type ValidationError, validateSchema } from '@dxos/schema';
@@ -136,11 +130,15 @@ export const useFormHandler = <T extends AnyProperties>({
     prop: valuesProp,
     defaultProp: defaultValues,
     onChange: () => {
-      setValues(valuesProp ?? defaultValues);
-      setChanged({});
-      setTouched({});
-      setErrors({});
-      setSaving(false);
+      // Only reset when controlled: parent passed new values.
+      // Uncontrolled updates come from setValues in onValueChange.
+      if (valuesProp !== undefined) {
+        setValues(valuesProp ?? defaultValues);
+        setChanged({});
+        setTouched({});
+        setErrors({});
+        setSaving(false);
+      }
     },
   });
   // TODO(wittjosiah): Upgrade @radix-ui/react-use-controllable-state.
@@ -256,6 +254,7 @@ export const useFormHandler = <T extends AnyProperties>({
       log('onValueChange', { path, value });
 
       const jsonPath = createJsonPath(path);
+      const pathArray = path;
       let parsedValue = value as any;
       try {
         if (type._tag === 'NumberKeyword') {
@@ -266,21 +265,25 @@ export const useFormHandler = <T extends AnyProperties>({
         parsedValue = undefined;
       }
 
-      // Update.
-      const newValues = { ...setValue$(values, jsonPath, parsedValue) };
-      setValues(newValues);
+      // Create merged values for validation and callback. Form never mutates; parent applies via onValuesChanged.
+      const newValues = mergeAtPath(values, pathArray as (string | number)[], parsedValue) as Partial<T>;
 
       // TODO(burdon): Check value has changed from original.
       const newChanged = { [jsonPath]: true };
-      setChanged({ ...changed, ...newChanged });
+      setChanged((prev) => ({ ...prev, ...newChanged }));
 
       // Validate.
       const isValid = validate(newValues);
 
-      // Callback.
+      // Notify parent; parent is responsible for applying the change.
       onValuesChanged?.(newValues, { isValid, changed: newChanged });
+
+      // For uncontrolled mode, update internal state. Controlled mode relies on parent to pass new values.
+      if (valuesProp === undefined) {
+        setValues(newValues);
+      }
     },
-    [values, changed, validate, onValuesChanged],
+    [values, validate, onValuesChanged, valuesProp],
   );
 
   const onBlur = useCallback(
@@ -341,6 +344,27 @@ export const useFormHandler = <T extends AnyProperties>({
   );
 };
 
+/**
+ * Creates a new object with value at path. Does not mutate source.
+ * Preserves arrays when path segments are numeric indices.
+ */
+const mergeAtPath = (obj: any, path: readonly (string | number)[], value: any): any => {
+  if (path.length === 0) {
+    return value;
+  }
+
+  const [head, ...rest] = path;
+  const child = rest.length === 0 ? value : mergeAtPath(obj?.[head], rest, value);
+
+  if (Array.isArray(obj)) {
+    const copy = [...obj];
+    copy[head as number] = child;
+    return copy;
+  }
+
+  return { ...obj, [head]: child };
+};
+
 const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {

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]);
 };