@dxos/react-ui-form 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/src/components/ViewEditor/ViewEditor.tsx

@@ -3,14 +3,13 @@
 //
 
 import { RegistryContext } from '@effect-atom/atom-react';
-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, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry, View } from '@dxos/echo';
-import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
+import { EID, Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type Registry, Type, View } from '@dxos/echo';
+import { type JsonProp } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { useObject, useQuery } from '@dxos/react-client/echo';
 import { IconButton, Input, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
@@ -39,12 +38,12 @@ import {
 
 export type ViewEditorProps = ThemedClassName<
   {
-    schema: Schema.Schema.AnyNoContext;
+    type: Type.AnyEntity;
     view: View.View;
     mode?: 'schema' | 'tag';
-    registry?: SchemaRegistry.SchemaRegistry;
+    registry?: Registry.Registry;
     showHeading?: boolean;
-    onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
+    onQueryChanged?: (query: QueryAST.Query, target?: EID.EID) => void;
     onDelete?: (fieldId: string) => void;
   } & Pick<QueryFormProps, 'types' | 'tags'> &
     Pick<FormRootProps<any>, 'readonly' | 'db'>
@@ -57,7 +56,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
   (
     {
       classNames,
-      schema,
+      type,
       view,
       mode = 'schema',
       registry,
@@ -72,16 +71,15 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     forwardedRef,
   ) => {
     const atomRegistry = useContext(RegistryContext);
-    const schemaReadonly = !isMutable(schema);
+    const schemaReadonly = Type.getDatabase(type) == null;
     const { t } = useTranslation(translationKey);
 
     const projectionModel = useMemo(() => {
-      // Use reactive and mutable version of json schema when schema is mutable.
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+      const jsonSchema = type.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);
+      // Pass type only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : undefined);
 
       const model = new ProjectionModel({
         registry: atomRegistry,
@@ -91,7 +89,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       });
 
       return model;
-    }, [atomRegistry, schema, view]);
+    }, [atomRegistry, type, view]);
 
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
 
@@ -100,9 +98,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         if (from._tag !== 'scope') {
           return undefined;
         }
-        return Option.fromNullable(from.scope.feeds).pipe(
-          Option.flatMap((feeds) => Array.head(feeds)),
-          Option.map(String),
+        const feedScope = from.scopes.find((s) => s._tag === 'feed');
+        return Option.fromNullable(feedScope).pipe(
+          Option.map((s) => s.feedUri),
           Option.getOrUndefined,
         );
       }),
@@ -115,8 +113,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       if (!queueTarget) {
         return undefined;
       }
-      const feed = feeds.find((feed) => Feed.getQueueDxn(feed)?.toString() === queueTarget);
-      return feed ? Ref.fromDXN(Entity.getDXN(feed)) : undefined;
+      const feed = feeds.find((feed) => Feed.getQueueUri(feed)?.toString() === queueTarget);
+      return feed ? Ref.fromURI(Entity.getURI(feed)) : undefined;
     }, [queueTarget, feeds]);
 
     const viewSchema = useMemo(() => {
@@ -160,13 +158,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const handleUpdate = useCallback(
       (values: any) => {
         const targetValue = values.target;
-        let feedDXN: string | undefined;
+        let queueDxn: EID.EID | undefined;
 
         if (Ref.isRef(targetValue)) {
-          const targetDXN = targetValue.dxn.toString();
-          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === targetDXN);
+          const feedUri = targetValue.uri;
+          const feed = feeds.find((feed) => Obj.getURI(feed) === feedUri);
           if (feed) {
-            feedDXN = Feed.getQueueDxn(feed)?.toString();
+            queueDxn = Feed.getQueueUri(feed);
           }
         }
 
@@ -175,7 +173,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           mode === 'schema'
             ? Query.select(Filter.typename(values.query)).ast
             : JSON.parse(JSON.stringify(values.query));
-        onQueryChanged?.(query, feedDXN);
+        onQueryChanged?.(query, queueDxn);
       },
       [onQueryChanged, mode, feeds],
     );
@@ -203,7 +201,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
 
           <FormFieldLabel label={t('fields.label')} asChild />
           <FieldList
-            schema={schema}
+            type={type}
             view={view}
             registry={registry}
             readonly={readonly}
@@ -216,23 +214,22 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
   },
 );
 
-type FieldListProps = Pick<ViewEditorProps, 'schema' | 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>;
+type FieldListProps = Pick<ViewEditorProps, 'type' | 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>;
 
-const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }: FieldListProps) => {
+const FieldList = ({ type, view, registry, readonly, showHeading = false, onDelete }: FieldListProps) => {
   const atomRegistry = useContext(RegistryContext);
-  const schemaReadonly = !isMutable(schema);
+  const schemaReadonly = Type.getDatabase(type) == null;
   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);
+    const jsonSchema = type.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);
+    // Pass type only when mutable to allow schema mutations.
+    const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : undefined);
 
     const model = new ProjectionModel({
       registry: atomRegistry,
@@ -242,7 +239,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     });
 
     return model;
-  }, [atomRegistry, schema, view]);
+  }, [atomRegistry, type, view]);
 
   const [expandedField, setExpandedField] = useState<View.FieldType['id']>();
 

package/src/components/index.ts

@@ -7,5 +7,6 @@ export * from './Form';
 export * from './ObjectForm';
 export * from './ObjectPicker';
 export * from './ObjectProperties';
+export * from './ObjectTree';
 export * from './Settings';
 export * from './ViewEditor';

package/src/components/testing.tsx

@@ -5,8 +5,8 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
+import { composableProps, slottable } from '@dxos/react-ui';
 import { Syntax } from '@dxos/react-ui-syntax-highlighter';
-import { composableProps, slottable } from '@dxos/ui-theme';
 
 type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
@@ -19,7 +19,7 @@ export const TestLayout = ({ children, json }: TestLayoutProps) => {
           <Syntax.Content>
             <Syntax.Filter />
             <Syntax.Viewport>
-              <Syntax.Code testId='debug' classNames='text-xs' />
+              <Syntax.Code testId='debug' classNames='text-sm' />
             </Syntax.Viewport>
           </Syntax.Content>
         </Syntax.Root>
@@ -30,9 +30,9 @@ export const TestLayout = ({ children, json }: TestLayoutProps) => {
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
+export const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
   return (
-    <div {...composableProps({ classNames: 'dx-container bg-modal-surface rounded-md' })} ref={forwardedRef}>
+    <div {...composableProps({ classNames: 'dx-container bg-card-surface rounded-md' })} ref={forwardedRef}>
       {children}
     </div>
   );

package/src/translations.ts

@@ -19,6 +19,7 @@ export const translations = [
         'field-format.label': 'Type',
         'field-path.label': 'Field path',
 
+        'remove-item.button': 'Delete item',
         'add-item.button': 'Add item',
         'add-property-button.label': 'Add property',
         'boolean-input-true.value': 'Yes',
@@ -85,7 +86,7 @@ export const translations = [
         // System schema message.
         'system-schema.title': 'System type',
         'system-schema.description': 'System type: cannot add or remove fields.',
-        'remove.button': 'Remove',
+        'remove.button': 'Delete',
       },
     },
   },

package/src/util/properties.test.ts

@@ -3,9 +3,12 @@
 //
 
 import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 import { describe, test } from 'vitest';
 
-import { Annotation, JsonSchema, Type } from '@dxos/echo';
+import { DXN, Annotation, JsonSchema, Type } from '@dxos/echo';
+import { Format } from '@dxos/echo/internal';
+import { findNode, getArrayElementType } from '@dxos/effect';
 
 import { getFormProperties } from './properties';
 
@@ -14,9 +17,9 @@ describe('getFormProperties', () => {
     const TestSchema = Schema.Struct({
       name: Schema.optional(Schema.String),
       hidden: Schema.String.pipe(Annotation.FormInputAnnotation.set(false)),
-    }).pipe(Type.object({ typename: 'org.dxos.test.keyword-hidden', version: '0.1.0' }));
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.keywordHidden', '0.1.0')));
 
-    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    const names = getFormProperties(Type.getSchema(TestSchema).ast).map((prop) => prop.name);
     expect(names).toContain('name');
     expect(names).not.toContain('hidden');
   });
@@ -28,9 +31,9 @@ describe('getFormProperties', () => {
     const TestSchema = Schema.Struct({
       name: Schema.optional(Schema.String),
       schema: JsonSchema.JsonSchema.pipe(Annotation.FormInputAnnotation.set(false)),
-    }).pipe(Type.object({ typename: 'org.dxos.test.struct-hidden', version: '0.1.0' }));
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.structHidden', '0.1.0')));
 
-    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    const names = getFormProperties(Type.getSchema(TestSchema).ast).map((prop) => prop.name);
     expect(names).toContain('name');
     expect(names).not.toContain('schema');
   });
@@ -39,13 +42,68 @@ describe('getFormProperties', () => {
     const TestSchema = Schema.Struct({
       name: Schema.optional(Schema.String),
       context: Schema.Array(Schema.Any).pipe(Annotation.FormInputAnnotation.set(false)),
-    }).pipe(Type.object({ typename: 'org.dxos.test.array-hidden', version: '0.1.0' }));
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.arrayHidden', '0.1.0')));
 
-    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    const names = getFormProperties(Type.getSchema(TestSchema).ast).map((prop) => prop.name);
     expect(names).toContain('name');
     expect(names).not.toContain('context');
   });
 
+  test('filters out optional fields annotated FormInputAnnotation.set(false)', ({ expect }) => {
+    // Regression: optional fields' `prop.type` is the union `T | undefined`; the
+    // annotation lives on the inner `T`. Without unwrapping, the filter would
+    // miss the annotation and the hidden field would render. Covers the
+    // conventional pattern `Schema.X.pipe(FormInputAnnotation.set(false), Schema.optional)`.
+    const TestSchema = Schema.Struct({
+      name: Schema.optional(Schema.String),
+      userId: Schema.String.pipe(Annotation.FormInputAnnotation.set(false), Schema.optional),
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.optionalHidden', '0.1.0')));
+
+    const names = getFormProperties(Type.getSchema(TestSchema).ast).map((prop) => prop.name);
+    expect(names).toContain('name');
+    expect(names).not.toContain('userId');
+  });
+
+  test('preserves a deeply-nested FormInputAnnotation through unions and arrays', ({ expect }) => {
+    // Regression: a hidden field nested below a discriminated union and arrays of structs (e.g.
+    // Segment.details(road).routes[].legs[].geometry). `encodedBoundAST` strips annotations from
+    // non-keyword inner types, so without keeping container types raw the annotation is lost by
+    // the time the form recurses to the leaf field. The transformation element (GeoPoint) is the
+    // trigger that forces the encode rebuild.
+    const Leg = Schema.Struct({
+      distance: Schema.Number,
+      geometry: Schema.Array(Format.GeoPoint).pipe(Annotation.FormInputAnnotation.set(false)),
+    });
+    const Route = Schema.Struct({ legs: Schema.Array(Leg) });
+    const TestSchema = Schema.Struct({
+      details: Schema.Union(
+        Schema.TaggedStruct('road', { routes: Schema.optional(Schema.Array(Route)) }),
+        Schema.TaggedStruct('other', { note: Schema.optional(Schema.String) }),
+      ),
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.nestedHidden', '0.1.0')));
+
+    // Drill as the form does: getFormProperties at each level, descending via the property type
+    // (array element / type literal) returned by the previous level.
+    const findTypeLiteralWith = (ast: SchemaAST.AST, prop: string) =>
+      findNode(
+        ast,
+        (node) => SchemaAST.isTypeLiteral(node) && SchemaAST.getPropertySignatures(node).some((p) => p.name === prop),
+      )!;
+    const propType = (ast: SchemaAST.AST, name: string) => getFormProperties(ast).find((p) => p.name === name)!.type;
+
+    const detailsType = propType(Type.getSchema(TestSchema).ast, 'details');
+    const roadTypeLiteral = findTypeLiteralWith(detailsType, 'routes');
+    const routeTypeLiteral = findNode(
+      getArrayElementType(propType(roadTypeLiteral, 'routes'))!,
+      SchemaAST.isTypeLiteral,
+    )!;
+    const legTypeLiteral = findNode(getArrayElementType(propType(routeTypeLiteral, 'legs'))!, SchemaAST.isTypeLiteral)!;
+
+    const names = getFormProperties(legTypeLiteral).map((prop) => prop.name);
+    expect(names).toContain('distance');
+    expect(names).not.toContain('geometry');
+  });
+
   test('preserves annotation when chained with .annotations()', ({ expect }) => {
     // Regression: `.pipe(FormInputAnnotation.set(false)).annotations({...})` must
     // not lose the form-input annotation.
@@ -54,9 +112,9 @@ describe('getFormProperties', () => {
       hidden: JsonSchema.JsonSchema.pipe(Annotation.FormInputAnnotation.set(false)).annotations({
         description: 'Hidden field',
       }),
-    }).pipe(Type.object({ typename: 'org.dxos.test.chained-hidden', version: '0.1.0' }));
+    }).pipe(Type.makeObject(DXN.make('org.dxos.test.chainedHidden', '0.1.0')));
 
-    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    const names = getFormProperties(Type.getSchema(TestSchema).ast).map((prop) => prop.name);
     expect(names).toContain('name');
     expect(names).not.toContain('hidden');
   });

package/src/util/properties.ts

@@ -6,7 +6,20 @@ import * as Option from 'effect/Option';
 import * as SchemaAST from 'effect/SchemaAST';
 
 import { Annotation } from '@dxos/echo';
-import { type SchemaProperty, getProperties } from '@dxos/effect';
+import { type SchemaProperty, getProperties, isArrayType, isNestedType } from '@dxos/effect';
+
+/** The property's type with an optional `T | undefined` union unwrapped to its inner `T`. */
+const unwrapOptional = (prop: SchemaAST.PropertySignature): SchemaAST.AST => {
+  if (!prop.isOptional || !SchemaAST.isUnion(prop.type)) {
+    return prop.type;
+  }
+  // Drop the `undefined` member, preserving the remaining union (don't collapse `A | B | undefined` to `A`).
+  const defined = prop.type.types.filter((type) => type._tag !== 'UndefinedKeyword');
+  if (defined.length === 0) {
+    return prop.type;
+  }
+  return defined.length === 1 ? defined[0] : SchemaAST.Union.make(defined, prop.type.annotations);
+};
 
 /**
  * Get the property types of an AST and filter out properties that are not form inputs.
@@ -16,14 +29,33 @@ import { type SchemaProperty, getProperties } from '@dxos/effect';
  * annotations from non-keyword inner types (e.g., `Schema.Struct`, `Schema.Array`).
  * Without this, fields like `Routine.input` (a JsonSchema struct) annotated
  * `FormInputAnnotation.set(false)` would still render in the form.
+ *
+ * For optional fields, `prop.type` is the union `T | undefined` — the annotation
+ * lives on the inner `T`. Unwrap before reading so that the conventional pattern
+ * `Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional)` works.
+ *
+ * Container properties (nested structs, unions, arrays) keep their *raw* AST rather than
+ * the `encodedBoundAST` produced by `getProperties`. `encodedBoundAST` strips annotations
+ * from non-keyword inner types, so a `FormInputAnnotation` nested beneath an encoded container
+ * (e.g. `RouteLeg.geometry`, reached via `Segment → details → routes → Route → legs`) would
+ * otherwise be lost by the time recursion reaches it. Leaf/transformation fields stay encoded
+ * (e.g. a `DateTime` still renders as its encoded string input).
  */
 export const getFormProperties = (ast: SchemaAST.AST): SchemaProperty[] => {
+  const signatures = SchemaAST.getPropertySignatures(ast);
+  const rawByName = new Map<PropertyKey, SchemaAST.AST>(signatures.map((prop) => [prop.name, unwrapOptional(prop)]));
   const hidden = new Set(
-    SchemaAST.getPropertySignatures(ast)
+    signatures
       .filter(
-        (prop) => Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)) === false,
+        (prop) =>
+          Annotation.FormInputAnnotation.getFromAst(unwrapOptional(prop)).pipe(Option.getOrElse(() => true)) === false,
       )
       .map((prop) => prop.name),
   );
-  return getProperties(ast).filter((prop) => !hidden.has(prop.name));
+  return getProperties(ast)
+    .filter((prop) => !hidden.has(prop.name))
+    .map((prop) => {
+      const raw = rawByName.get(prop.name);
+      return raw && (isNestedType(raw) || isArrayType(raw)) ? { ...prop, type: raw } : prop;
+    });
 };

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*?raw' {
+  const content: string;
+  export default content;
+}