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

package/src/components/ObjectTree/ObjectTree.stories.tsx

@@ -0,0 +1,134 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { parseProto } from '@dxos/effect-proto';
+import { log } from '@dxos/log';
+import { type Config as ConfigProto, Runtime } from '@dxos/protocols/proto/dxos/config';
+// Raw .proto source resolved through `@dxos/protocols`'s `./proto/dxos/*.proto`
+// exports entry. Vite's `?raw` query suffix returns the file as a string so we
+// can hand it straight to `parseProto` -- the same flow the unit test uses.
+import configProto from '@dxos/protocols/proto/dxos/config.proto?raw';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Form } from '../Form';
+import { ObjectTree } from './ObjectTree';
+
+const registry = parseProto(configProto);
+const ConfigSchema = registry.get('dxos.config.Config');
+
+// A representative Config value that exercises nested messages, arrays, enums
+// (rendered as their string names by the proto codec), and `google.protobuf.Any`.
+const value: ConfigProto = {
+  version: 1,
+  runtime: {
+    client: {
+      log: { filter: 'info', prefix: 'app' },
+      storage: {
+        persistent: true,
+        sqliteMode: Runtime.Client.Storage.SqliteMode.OPFS,
+        dataRoot: '/var/lib/dxos',
+      },
+      edgeFeatures: {
+        echoReplicator: true,
+        subductionReplicator: true,
+        signaling: true,
+      },
+      servicesMode: Runtime.Client.ServicesMode.SHARED_WORKER,
+      enableSnapshots: false,
+      snapshotInterval: 60_000,
+    },
+    app: {
+      org: 'DXOS',
+      theme: 'dark',
+      website: 'https://dxos.org',
+      build: {
+        timestamp: '2026-05-22T12:00:00Z',
+        commitHash: 'abc1234',
+        version: '0.8.3',
+        branch: 'main',
+      },
+    },
+    services: {
+      edge: { url: 'wss://edge.dxos.org' },
+      signaling: [
+        { server: 'wss://signal-1.dxos.org', api: 'v1' },
+        { server: 'wss://signal-2.dxos.org', api: 'v1' },
+      ],
+      iceProviders: [{ urls: 'turn:turn.dxos.org' }],
+    },
+    keys: [
+      { name: 'OPENAI_API_KEY', value: 'sk-...' },
+      { name: 'ANTHROPIC_API_KEY', value: 'ant-...' },
+    ],
+  },
+};
+
+const meta = {
+  title: 'ui/react-ui-form/ObjectTree',
+  component: ObjectTree,
+  decorators: [withTheme(), withLayout({ layout: 'column', scroll: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ObjectTree>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    schema: ConfigSchema,
+    value: value,
+  },
+};
+
+export const JSON = () => (
+  <Syntax.Root data={value}>
+    <Syntax.Content>
+      <Syntax.Filter />
+      <Syntax.Viewport>
+        <Syntax.Code />
+      </Syntax.Viewport>
+    </Syntax.Content>
+  </Syntax.Root>
+);
+
+// Renders the same proto-derived `ConfigSchema` + `value` through the
+// interactive `Form` component, for side-by-side comparison with the
+// read-only ObjectTree above. `db` is intentionally omitted -- the proto
+// schema is not an ECHO type, so there's no space/database in play.
+export const WithForm = () => (
+  <Form.Root
+    schema={ConfigSchema as any}
+    defaultValues={value as any}
+    onSave={(next) => log.info('save', { next })}
+    onCancel={() => log.info('cancel')}
+  >
+    <Form.Viewport>
+      <Form.Content>
+        <Form.FieldSet />
+        <Form.Actions />
+      </Form.Content>
+    </Form.Viewport>
+  </Form.Root>
+);
+
+export const WithReadOnlyForm = () => (
+  <Form.Root schema={ConfigSchema as any} defaultValues={value as any} readonly={true}>
+    <Form.Viewport>
+      <Form.Content>
+        <Form.FieldSet />
+        <Form.Actions />
+      </Form.Content>
+    </Form.Viewport>
+  </Form.Root>
+);

package/src/components/ObjectTree/ObjectTree.tsx

@@ -0,0 +1,190 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// A minimal, read-only schema-driven viewer. Walks an Effect Schema and a
+// matching value and produces a flat list of indented key/value rows -- one
+// per leaf field, with nested Struct fields contributing a header row plus
+// recursively-indented children, and arrays expanded as `[index]` rows.
+//
+// Designed to drive a hierarchical editor over schemas produced by
+// `@dxos/effect-proto` (e.g. the proto-generated `dxos.config.Config`
+// schema), but works for any Effect Struct schema.
+
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import React, { type ReactElement, type ReactNode, type RefAttributes } from 'react';
+
+import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
+
+export type ObjectTreeProps<T> = {
+  schema: Schema.Schema<T, any, never>;
+  value: T;
+};
+
+/**
+ * Render a value as a sequence of key/value rows whose shape and order are
+ * driven by `schema`. Object-typed properties become a header row whose
+ * children are indented under it; arrays expand element-by-element.
+ *
+ * Composable: spreads unknown props (incl. `className` / `classNames` /
+ * `style` / `role`) onto its root `<div>` and forwards its ref, so it can
+ * be slotted into themed parents like `Panel.Content`.
+ */
+const ObjectTreeImpl = composable<HTMLDivElement, ObjectTreeProps<any>>(({ schema, value, ...props }, forwardedRef) => (
+  <div {...composableProps(props, { role: 'table', classNames: 'font-mono text-sm w-full' })} ref={forwardedRef}>
+    <Node ast={schema.ast} value={value} label={null} depth={0} />
+  </div>
+));
+
+ObjectTreeImpl.displayName = 'ObjectTree';
+
+// `composable<HTMLDivElement, ObjectTreeProps<any>>` erases the `T` type
+// parameter inside the factory; the cast restores the generic signature for
+// consumers without changing the underlying component (the COMPOSABLE marker
+// stays attached). This is the pattern documented on `composable()` itself.
+export const ObjectTree = ObjectTreeImpl as unknown as <T>(
+  props: ComposableProps<ObjectTreeProps<T>> & RefAttributes<HTMLDivElement>,
+) => ReactElement | null;
+
+/**
+ * Peel wrappers that don't affect the runtime shape: Refinements pass their
+ * `from`, Suspends resolve via `f()`, and Transformations expose the encoded
+ * (input) side. Repeated unwrapping handles chains like `Schema.suspend ->
+ * Refinement -> TypeLiteral`.
+ */
+const unwrap = (ast: SchemaAST.AST): SchemaAST.AST => {
+  if (SchemaAST.isRefinement(ast)) {
+    return unwrap(ast.from);
+  }
+  if (SchemaAST.isSuspend(ast)) {
+    return unwrap(ast.f());
+  }
+  if (SchemaAST.isTransformation(ast)) {
+    return unwrap(ast.from);
+  }
+  return ast;
+};
+
+/**
+ * Effect models `Schema.optional(X)` as a property whose type AST is
+ * `Union(X, UndefinedKeyword)`. For walking purposes we want X -- the
+ * undefined branch carries no schema information for the viewer.
+ */
+const stripOptional = (ast: SchemaAST.AST): SchemaAST.AST => {
+  if (!SchemaAST.isUnion(ast)) {
+    return ast;
+  }
+  const nonUndef = ast.types.filter((t) => !SchemaAST.isUndefinedKeyword(t));
+  return nonUndef.length === 1 ? nonUndef[0] : ast;
+};
+
+type NodeProps = {
+  ast: SchemaAST.AST;
+  value: unknown;
+  /** Row label; `null` means render children directly without a header row. */
+  label: ReactNode | null;
+  depth: number;
+};
+
+const Node = ({ ast, value, label, depth }: NodeProps) => {
+  const inner = unwrap(stripOptional(ast));
+
+  // Struct: header row + indented children. Skipping the header at depth 0
+  // keeps the root flush-left.
+  if (SchemaAST.isTypeLiteral(inner) && isPlainObject(value)) {
+    const childDepth = label === null ? depth : depth + 1;
+    return (
+      <>
+        {label !== null && <Row label={label} value={null} depth={depth} kind='group' />}
+        {inner.propertySignatures.map((prop) => (
+          <Node
+            key={String(prop.name)}
+            ast={prop.type}
+            value={(value as Record<string, unknown>)[String(prop.name)]}
+            label={String(prop.name)}
+            depth={childDepth}
+          />
+        ))}
+      </>
+    );
+  }
+
+  // Array (`Schema.Array(X)` -> TupleType with single rest element).
+  if (SchemaAST.isTupleType(inner) && Array.isArray(value)) {
+    const elemType = inner.rest[0]?.type;
+    return (
+      <>
+        {label !== null && <Row label={label} value={`Array(${value.length})`} depth={depth} kind='group' />}
+        {value.map((item, index) => (
+          <Node
+            key={index}
+            ast={elemType ?? SchemaAST.unknownKeyword}
+            value={item}
+            label={`[${index}]`}
+            depth={depth + 1}
+          />
+        ))}
+      </>
+    );
+  }
+
+  // Leaf (scalars, unions of literals, unknown, etc.).
+  return <Row label={label ?? ''} value={formatLeaf(value)} depth={depth} kind='leaf' />;
+};
+
+type RowProps = {
+  label: ReactNode;
+  value: ReactNode;
+  depth: number;
+  kind: 'group' | 'leaf';
+};
+
+const Row = ({ label, value, depth }: RowProps) => (
+  <div role='row' className={mx('flex items-baseline gap-3 py-1')} style={{ paddingInlineStart: 8 + depth * 16 }}>
+    <div role='cell' className='text-subdued'>
+      {label}
+    </div>
+    <div role='cell' className={mx('break-all text-base-fg')}>
+      {value}
+    </div>
+  </div>
+);
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Format a leaf value for display. Strings are quoted so empty strings are
+ * visible; missing values surface as an em-dash so the row stays present.
+ */
+const formatLeaf = (value: unknown): ReactNode => {
+  if (value === undefined) {
+    return null;
+  }
+
+  if (value === null) {
+    return <span className='text-description'>null</span>;
+  }
+
+  switch (typeof value) {
+    case 'string':
+      // Quote strings so empty strings remain visible (`""` rather than blank).
+      return <span className='text-blue-text'>{JSON.stringify(value)}</span>;
+    case 'number':
+    case 'bigint':
+      return <span className='text-green-text'>{String(value)}</span>;
+    case 'boolean':
+      return <span className='text-purple-text'>{String(value)}</span>;
+    default:
+      // Objects we couldn't expand via schema (e.g. `google.protobuf.Any` -> Unknown)
+      // are rendered as compact JSON.
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return String(value);
+      }
+  }
+};

package/src/components/ObjectTree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './ObjectTree';

package/src/components/Settings/Settings.tsx

@@ -5,7 +5,8 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
 

package/src/components/Settings/SettingsItem.tsx

@@ -41,7 +41,7 @@ export const SettingsItem = ({ title, description = '', children }: SettingsItem
   return (
     <Input.Root>
       <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
-        <Input.Label classNames='pb-trim-md text-base-foreground text-lg md:col-span-2'>
+        <Input.Label classNames='pb-trim-md text-base-fg text-lg md:col-span-2'>
           {toLocalizedString(title, t)}
         </Input.Label>
         <Input.DescriptionAndValidation>

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

@@ -6,8 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type, type View } from '@dxos/echo';
-import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
+import { DXN, EID, Filter, JsonSchema, Obj, Query, type QueryAST, Scope, Tag, Type, type View } from '@dxos/echo';
+import { Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
@@ -22,15 +22,15 @@ import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Organization.Organization.typename, label: 'Organization' },
-  { value: Person.Person.typename, label: 'Person' },
-  { value: Pipeline.Pipeline.typename, label: 'Project' },
-  { value: Employer.Employer.typename, label: 'Employer' },
+  { value: Type.getTypename(Organization.Organization), label: 'Organization' },
+  { value: Type.getTypename(Person.Person), label: 'Person' },
+  { value: Type.getTypename(Pipeline.Pipeline), label: 'Project' },
+  { value: Type.getTypename(Employer.Employer), label: 'Employer' },
 ];
 
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
-  schema: EchoSchema;
+  type: Type.AnyEntity;
   view: View.View;
   projection: ProjectionModel;
 };
@@ -39,7 +39,7 @@ type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
 const DefaultStory = (props: DefaultStoryProps) => {
   const { space } = useClientStory();
-  const [schema, setSchema] = useState<EchoSchema>();
+  const [type, setType] = useState<Type.AnyEntity>();
   const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
@@ -51,71 +51,66 @@ const DefaultStory = (props: DefaultStoryProps) => {
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }).pipe(
-        Type.object({
-          typename: 'com.example.type.test',
-          version: '0.1.0',
-        }),
-      );
+      }).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
 
       const AlternateSchema = Schema.Struct({
         title: Schema.String,
         description: Schema.String,
         completed: Schema.Boolean,
-      }).pipe(
-        Type.object({
-          typename: 'com.example.type.alternate',
-          version: '0.1.0',
-        }),
-      );
-
-      const [testSchema] = await space.db.schemaRegistry.register([TestSchema, AlternateSchema]);
+      }).pipe(Type.makeObject(DXN.make('com.example.type.alternate', '0.1.0')));
+
+      const testType = await space.db.addType(TestSchema);
+      await space.db.addType(AlternateSchema);
       const view = ViewModel.make({
         name: 'Test',
         query: Query.select(Filter.type(TestSchema)),
         jsonSchema: JsonSchema.toJsonSchema(TestSchema),
       });
 
-      setSchema(testSchema);
+      setType(testType);
       setView(view);
     }
   }, [space]);
 
   const updateViewQuery = useCallback(
-    async (newQuery: QueryAST.Query, target?: string) => {
-      if (!schema || !view || !space) {
+    async (newQuery: QueryAST.Query, target?: EID.EID) => {
+      if (!type || !view || !space) {
         return;
       }
 
       if (props.mode === 'tag') {
-        const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).from({ feeds: [queue] }) : Query.fromAst(newQuery);
+        const queue = target;
+        const query = queue
+          ? Query.fromAst(newQuery).from([
+              Scope.feed(`dxn:queue:data:${EID.getSpaceId(queue)}:${EID.getEntityId(queue)}`),
+            ])
+          : Query.fromAst(newQuery);
         Obj.update(view, (view) => {
           view.query.ast = query.ast as Mutable<typeof query.ast>;
         });
 
         const typename = getTypenameFromQuery(query.ast);
-        const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
+        const allTypes = space.db.graph.registry.list().filter(Type.isType);
+        const newSchema = allTypes.find((t) => Type.getTypename(t) === typename);
         if (!newSchema) {
           return;
         }
 
         const newView = ViewModel.make({
           query,
-          jsonSchema: newSchema.jsonSchema,
+          jsonSchema: JsonSchema.toJsonSchema(newSchema),
         });
         Obj.update(view, (view) => {
           view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
         });
-        setSchema(() => newSchema);
+        setType(() => newSchema);
       } else {
         Obj.update(view, (view) => {
           view.query.ast = newQuery as Mutable<typeof newQuery>;
         });
-        schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
-    [view, schema],
+    [view, type],
   );
 
   const handleDelete = useCallback(
@@ -125,22 +120,22 @@ const DefaultStory = (props: DefaultStoryProps) => {
 
   // Expose objects on window for test access.
   useEffect(() => {
-    if (typeof window !== 'undefined' && schema && view && projectionRef.current) {
+    if (typeof window !== 'undefined' && type && view && projectionRef.current) {
       (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] = {
-        schema,
+        type,
         view,
         projection: projectionRef.current,
       } satisfies ViewEditorDebugObjects;
     }
-  }, [schema, view]);
+  }, [type, view]);
 
   // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
   const json = useMemo(
-    () => JSON.parse(JSON.stringify({ schema, view, projection: projectionRef.current })),
-    [JSON.stringify(schema), JSON.stringify(view)],
+    () => JSON.parse(JSON.stringify({ schema: type, view, projection: projectionRef.current })),
+    [JSON.stringify(type), JSON.stringify(view)],
   );
 
-  if (!schema || !view) {
+  if (!type || !view) {
     return <div />;
   }
 
@@ -148,9 +143,9 @@ const DefaultStory = (props: DefaultStoryProps) => {
     <TestLayout json={json}>
       <ViewEditor
         ref={projectionRef}
-        schema={schema}
+        type={type}
         view={view}
-        registry={space?.db.schemaRegistry}
+        registry={space?.db.graph.registry}
         mode={props.mode}
         readonly={props.readonly}
         types={types}

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

@@ -3,11 +3,11 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
-import { View } from '@dxos/echo';
-import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
+import { Type, View } from '@dxos/echo';
+import { isInstanceOf } from '@dxos/echo/internal';
 import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
@@ -19,7 +19,7 @@ const { Default } = composeStories(stories);
 const getViewEditorDebugObjects = (): ViewEditorDebugObjects => {
   const debugObjects = (window as any)[VIEW_EDITOR_DEBUG_SYMBOL] as ViewEditorDebugObjects;
   expect(debugObjects).toBeDefined();
-  expect(debugObjects.schema).toBeInstanceOf(EchoSchema);
+  expect(Type.isType(debugObjects.type)).toBe(true);
   expect(isInstanceOf(View.View, debugObjects.view)).toBeTruthy();
   expect(debugObjects.projection).toBeInstanceOf(ProjectionModel);
   return debugObjects;
@@ -35,7 +35,10 @@ const waitForViewEditor = async () => {
 };
 
 describe('ViewEditor', () => {
-  afterEach(() => {
+  afterEach(async () => {
+    // Flush pending React scheduler work before teardown to prevent
+    // "window is not defined" errors from setImmediate callbacks firing after happy-dom cleanup.
+    await act(async () => {});
     cleanup();
   });
 
@@ -68,7 +71,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains new_property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.new_property).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();
@@ -116,7 +119,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema contains added_property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.added_property).toBeDefined();
 
@@ -160,7 +163,7 @@ describe('ViewEditor', () => {
     const debugObjects = getViewEditorDebugObjects();
 
     // Check schema no longer contains the name property.
-    const schemaProperties = debugObjects.schema.jsonSchema.properties;
+    const schemaProperties = debugObjects.type.jsonSchema.properties;
     expect(schemaProperties).toBeDefined();
     expect(schemaProperties!.name).toBeUndefined();