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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9735255",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,28 +37,28 @@
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
     "tabster": "^8.5.5",
-    "@dxos/async": "0.8.4-main.937b3ca",
-    "@dxos/debug": "0.8.4-main.937b3ca",
-    "@dxos/echo-query": "0.8.4-main.937b3ca",
-    "@dxos/effect": "0.8.4-main.937b3ca",
-    "@dxos/echo": "0.8.4-main.937b3ca",
-    "@dxos/echo-react": "0.8.4-main.937b3ca",
-    "@dxos/invariant": "0.8.4-main.937b3ca",
-    "@dxos/keys": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/lit-ui": "0.8.4-main.937b3ca",
-    "@dxos/react-client": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-components": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-editor": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-mosaic": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-pickers": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-list": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-searchlist": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-stack": "0.8.4-main.937b3ca",
-    "@dxos/schema": "0.8.4-main.937b3ca",
-    "@dxos/types": "0.8.4-main.937b3ca",
-    "@dxos/ui-types": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/async": "0.8.4-main.9735255",
+    "@dxos/debug": "0.8.4-main.9735255",
+    "@dxos/echo": "0.8.4-main.9735255",
+    "@dxos/echo-query": "0.8.4-main.9735255",
+    "@dxos/echo-react": "0.8.4-main.9735255",
+    "@dxos/invariant": "0.8.4-main.9735255",
+    "@dxos/keys": "0.8.4-main.9735255",
+    "@dxos/lit-ui": "0.8.4-main.9735255",
+    "@dxos/react-client": "0.8.4-main.9735255",
+    "@dxos/log": "0.8.4-main.9735255",
+    "@dxos/react-ui-components": "0.8.4-main.9735255",
+    "@dxos/react-ui-editor": "0.8.4-main.9735255",
+    "@dxos/react-ui-mosaic": "0.8.4-main.9735255",
+    "@dxos/react-ui-list": "0.8.4-main.9735255",
+    "@dxos/react-ui-pickers": "0.8.4-main.9735255",
+    "@dxos/react-ui-searchlist": "0.8.4-main.9735255",
+    "@dxos/react-ui-stack": "0.8.4-main.9735255",
+    "@dxos/schema": "0.8.4-main.9735255",
+    "@dxos/types": "0.8.4-main.9735255",
+    "@dxos/ui-types": "0.8.4-main.9735255",
+    "@dxos/effect": "0.8.4-main.9735255",
+    "@dxos/util": "0.8.4-main.9735255"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
@@ -69,19 +69,19 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.937b3ca",
-    "@dxos/storybook-utils": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/react-client": "0.8.4-main.937b3ca"
+    "@dxos/random": "0.8.4-main.9735255",
+    "@dxos/react-client": "0.8.4-main.9735255",
+    "@dxos/react-ui": "0.8.4-main.9735255",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9735255",
+    "@dxos/ui-theme": "0.8.4-main.9735255",
+    "@dxos/storybook-utils": "0.8.4-main.9735255"
   },
   "peerDependencies": {
     "effect": "3.19.11",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca"
+    "@dxos/react-ui": "0.8.4-main.9735255",
+    "@dxos/ui-theme": "0.8.4-main.9735255"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Form.tsx

@@ -8,7 +8,7 @@ import type * as SchemaAST from 'effect/SchemaAST';
 import React, { type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
 
 import { type AnyProperties } from '@dxos/echo/internal';
-import { createJsonPath, getValue as getValue$, setValue as setValue$ } from '@dxos/effect';
+import { createJsonPath, getValue as getValue$ } from '@dxos/effect';
 import { IconButton, type IconButtonProps, ScrollArea, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
@@ -20,6 +20,7 @@ import {
   useKeyHandler,
 } from '../../hooks';
 import { translationKey } from '../../translations';
+import { setValueEchoAware } from '../../util';
 
 import { FormFieldLabel, type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
 import {
@@ -93,7 +94,7 @@ const useFormValues: {
 
   useEffect(() => {
     if (!value && defaultValue) {
-      setValue$(values, jsonPath, defaultValue());
+      setValueEchoAware(values, jsonPath, defaultValue());
     }
   }, [value, defaultValue]);
 

package/src/components/ViewEditor/ViewEditor.tsx

@@ -12,6 +12,7 @@ import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMem
 import { Filter, Format, Obj, Query, QueryAST, type SchemaRegistry } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
+import { useObject } from '@dxos/react-client/echo';
 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';
@@ -21,7 +22,6 @@ import {
   ProjectionModel,
   VIEW_FIELD_LIMIT,
   type View,
-  createDirectChangeCallback,
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
@@ -81,11 +81,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,
@@ -220,15 +218,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,
@@ -264,15 +263,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) => {
+        // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+        const fields = [...v.projection.fields];
+        const [moved] = fields.splice(fromIndex, 1);
+        fields.splice(toIndex, 0, moved);
         v.projection.fields = fields;
       });
     },
-    [view.projection.fields, readonly],
+    [view, readonly],
   );
 
   const handleClose = useCallback(() => setExpandedField(undefined), []);
@@ -293,9 +292,13 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     [projectionModel],
   );
 
+  if (!viewSnapshot) {
+    return null;
+  }
+
   return (
     <List.Root<FieldType>
-      items={view.projection.fields as FieldType[]}
+      items={viewSnapshot.projection.fields as FieldType[]}
       isItem={Schema.is(FieldSchema)}
       getId={(field) => field.id}
       onMove={readonly ? undefined : handleMove}
@@ -332,7 +335,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                         <List.ItemDeleteButton
                           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'
                         />

package/src/hooks/useFormHandler.ts

@@ -7,6 +7,7 @@ import type * as Schema from 'effect/Schema';
 import type * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import {
   type JsonPath,
@@ -20,6 +21,8 @@ import { useDefaultValue } from '@dxos/react-ui';
 import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
+import { setValueEchoAware } from '../util';
+
 export type FormFieldStatus = {
   status?: 'error';
   error?: string;
@@ -267,7 +270,10 @@ export const useFormHandler = <T extends AnyProperties>({
       }
 
       // Update.
-      const newValues = { ...setValue$(values, jsonPath, parsedValue) };
+      // For ECHO objects, mutate in place via Obj.change(); for plain objects, spread to create new reference.
+      const newValues = Obj.isObject(values)
+        ? (setValueEchoAware(values, jsonPath, parsedValue), values)
+        : { ...setValue$(values, jsonPath, parsedValue) };
       setValues(newValues);
 
       // TODO(burdon): Check value has changed from original.

package/src/util/echo.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue as setValuePlain, splitJsonPath } from '@dxos/effect';
+
+/**
+ * Sets a value on an object, using Obj.change() if it's an ECHO object.
+ */
+// TODO(wittjosiah): Consider refactoring Form to not know about ECHO at all.
+//   Instead of directly mutating the values object, Form could work with a plain
+//   object copy and communicate all mutations through callbacks (e.g., onValuesChanged).
+//   The caller would then be responsible for applying changes to ECHO objects via
+//   Obj.change(). This would keep Form agnostic to the underlying data layer and
+//   avoid coupling react-ui-form to @dxos/echo.
+export const setValueEchoAware = <T extends object>(obj: T, path: JsonPath, value: any): T => {
+  if (Obj.isObject(obj)) {
+    Obj.change(obj, (mutableObj) => {
+      Obj.setValue(mutableObj, splitJsonPath(path), value);
+    });
+    return obj;
+  }
+  return setValuePlain(obj, path, value);
+};

package/src/util/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './echo';
 export * from './field';
 export * from './formatting';
 export * from './properties';