@dxos/react-ui-form 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

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

@@ -6,8 +6,7 @@ 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 } from '@dxos/echo';
-import { type View } from '@dxos/echo';
+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 { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
@@ -16,9 +15,9 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
-import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { translations } from '#translations';
 
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
@@ -36,9 +35,9 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<View.View>();
@@ -90,9 +89,9 @@ const DefaultStory = (props: StoryProps) => {
 
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
-        Obj.change(view, (v) => {
-          v.query.ast = query.ast as Mutable<typeof query.ast>;
+        const query = queue ? Query.fromAst(newQuery).from({ feeds: [queue] }) : Query.fromAst(newQuery);
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
         });
 
         const typename = getTypenameFromQuery(query.ast);
@@ -105,13 +104,13 @@ const DefaultStory = (props: StoryProps) => {
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        Obj.change(view, (v) => {
-          v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
         });
         setSchema(() => newSchema);
       } else {
-        Obj.change(view, (v) => {
-          v.query.ast = newQuery as Mutable<typeof newQuery>;
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
         });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }

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

@@ -11,7 +11,6 @@ import { EchoSchema, isInstanceOf } from '@dxos/echo/internal';
 import { ProjectionModel } from '@dxos/schema';
 
 import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
-
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 

package/src/components/ViewEditor/ViewEditor.tsx

@@ -9,8 +9,7 @@ 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 } from '@dxos/echo';
-import { View } from '@dxos/echo';
+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 { invariant } from '@dxos/invariant';
 import { useObject, useQuery } from '@dxos/react-client/echo';
@@ -24,9 +23,10 @@ import {
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
-import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
 import {
   Form,
@@ -100,8 +100,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         if (from._tag !== 'scope') {
           return undefined;
         }
-        return Option.fromNullable(from.scope.queues).pipe(
-          Option.flatMap((queues) => Array.head(queues)),
+        return Option.fromNullable(from.scope.feeds).pipe(
+          Option.flatMap((feeds) => Array.head(feeds)),
           Option.map(String),
           Option.getOrUndefined,
         );
@@ -160,13 +160,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const handleUpdate = useCallback(
       (values: any) => {
         const targetValue = values.target;
-        let queueDxn: string | undefined;
+        let feedDXN: string | undefined;
 
         if (Ref.isRef(targetValue)) {
-          const feedDxn = targetValue.dxn.toString();
-          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === feedDxn);
+          const targetDXN = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === targetDXN);
           if (feed) {
-            queueDxn = Feed.getQueueDxn(feed)?.toString();
+            feedDXN = Feed.getQueueDxn(feed)?.toString();
           }
         }
 
@@ -175,7 +175,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           mode === 'schema'
             ? Query.select(Filter.typename(values.query)).ast
             : JSON.parse(JSON.stringify(values.query));
-        onQueryChanged?.(query, queueDxn);
+        onQueryChanged?.(query, feedDXN);
       },
       [onQueryChanged, mode, feeds],
     );
@@ -189,11 +189,11 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     );
 
     return (
-      <div role='none' className={mx(classNames)}>
+      <div className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
           <Message.Root valence='info' classNames='my-form-padding'>
-            <Message.Title>{t('system schema description')}</Message.Title>
+            <Message.Title>{t('system-schema.description')}</Message.Title>
           </Message.Root>
         )}
 
@@ -201,7 +201,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         <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}
@@ -274,12 +274,12 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      Obj.change(view, (v) => {
+      Obj.update(view, (view) => {
         // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-        const fields = [...v.projection.fields];
+        const fields = [...view.projection.fields];
         const [moved] = fields.splice(fromIndex, 1);
         fields.splice(toIndex, 0, moved);
-        v.projection.fields = fields;
+        view.projection.fields = fields;
       });
     },
     [view, readonly],
@@ -317,7 +317,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     >
       {({ items: fields }) => (
         <>
-          {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
+          {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;
@@ -328,20 +328,13 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                   classNames={'grid grid-cols-subgrid col-span-5'}
                   aria-expanded={expandedField === field.id}
                 >
-                  <div
-                    role='none'
-                    className={mx(
-                      subtleHover,
-                      'grid grid-cols-subgrid col-span-5',
-                      'rounded-xs cursor-pointer min-h-10',
-                    )}
-                  >
+                  <div className='grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover'>
                     <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
                     <List.ItemIconButton
-                      label={t(hidden ? 'show field label' : 'hide field label')}
+                      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'}
                       autoHide={false}
@@ -351,7 +344,7 @@ 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 || viewSnapshot.projection.fields.length <= 1}
                           onClick={() => handleDelete(field.id)}
@@ -360,7 +353,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                         <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'
@@ -369,7 +362,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-5 mt-1 mb-1 border border-separator rounded-md'>
+                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -384,10 +377,10 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
             })}
           </div>
           {!readonly && !expandedField && (
-            <div role='none' className='my-form-padding'>
+            <div className='my-form-padding'>
               <IconButton
                 icon='ph--plus--regular'
-                label={t('add property button label')}
+                label={t('add-property-button.label')}
                 onClick={handleAdd}
                 disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
                 classNames='w-full'

package/src/components/index.ts

@@ -4,6 +4,8 @@
 
 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

@@ -5,17 +5,24 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/ui-theme';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { composableProps, slottable } from '@dxos/ui-theme';
 
-type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
+type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
-export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+export const TestLayout = ({ children, json }: TestLayoutProps) => {
   return (
-    <div className='w-full h-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
-      <TestPanel classNames={['flex flex-col h-full overflow-y-auto', classNames]}>{children}</TestPanel>
-      <TestPanel classNames={'overflow-hidden'}>
-        <JsonFilter testId='debug' data={json} classNames='h-full text-xs' />
+    <div className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
+      <TestPanel>{children}</TestPanel>
+      <TestPanel>
+        <Syntax.Root data={json}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code testId='debug' classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       </TestPanel>
     </div>
   );
@@ -23,14 +30,15 @@ export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-const TestPanel = ({ classNames, children }: TestPanelProps) => {
+const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
   return (
-    <div role='none' className={mx(['dx-document h-full bg-modal-surface rounded-md', classNames])}>
+    <div {...composableProps({ classNames: 'dx-container bg-modal-surface rounded-md' })} ref={forwardedRef}>
       {children}
     </div>
   );
-};
+});
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');
 export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');
+export const OBJECT_PROPERTIES_DEBUG_SYMBOL = Symbol('objectPropertiesDebug');

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

package/src/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './util';
-
-export { translations };

package/src/translations.ts

@@ -10,79 +10,82 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'fields label': 'Fields',
-        'hidden fields label': 'Hidden Fields',
-        'empty readonly ref field label': '(none)',
+        'fields.label': 'Fields',
+        'hidden-fields.label': 'Hidden Fields',
+        'empty-readonly-ref-field.label': '(none)',
 
-        // TODO(burdon): Standardize field/property.
-        'add property button label': 'Add property',
-        'field property label': 'Property',
-        'field property placeholder': 'Property name',
-        'field format label': 'Type',
-        'field path label': 'Field path',
-        'add field': 'Add field',
-        'delete field': 'Delete field',
-        'field limit reached': 'Maximum number of fields reached',
-        'boolean input true value': 'Yes',
-        'boolean input false value': 'No',
-        'show field label': 'Show field',
-        'hide field label': 'Hide field',
-        'delete field label': 'Delete field',
-        'ref field combobox input placeholder': 'Search…',
-        'ref field placeholder_one': 'Select…',
-        'ref field placeholder_other': 'Select items…',
+        'field-property.label': 'Property',
+        'field-property.placeholder': 'Property name',
+        'field-format.label': 'Type',
+        'field-path.label': 'Field path',
 
-        'example placeholder': 'Example',
-        'latitude placeholder': 'Latitude (e.g., 40.7128)',
-        'longitude placeholder': 'Longitude (e.g., -74.0060)',
+        'add-item.button': 'Add item',
+        'add-property-button.label': 'Add property',
+        'boolean-input-true.value': 'Yes',
+        'boolean-input-false.value': 'No',
+        'show-field.label': 'Show field',
+        'hide-field.label': 'Hide field',
+        'delete-field.label': 'Delete field',
+        'create-option.label': 'Create',
+        'add-tag.label': 'Add tag',
 
-        'cancel button label': 'Cancel',
-        'save button label': 'Save',
+        'ref-field-combobox-input.placeholder': 'Search…',
+        'ref-field.placeholder': 'Select…',
+        'ref-field.placeholder_one': 'Select…',
+        'ref-field.placeholder_other': 'Select items…',
 
-        // FormatEnum
-        'format boolean': 'Boolean',
-        'format currency': 'Currency',
-        'format date': 'Date',
-        'format date-time': 'DateTime',
-        'format did': 'DID',
-        'format duration': 'Duration',
-        'format dxn': 'DXN',
-        'format email': 'Email',
-        'format formula': 'Formula',
-        'format hostname': 'Hostname',
-        'format integer': 'Integer',
-        'format json': 'JSON',
-        'format lnglat': 'Geopoint',
-        'format markdown': 'Markdown',
-        'format percent': 'Percent',
-        'format ref': 'Reference',
-        'format regex': 'RegExp',
-        'format string': 'String',
-        'format single-select': 'Select',
-        'format multi-select': 'Multi-select',
-        'format text': 'Long text',
-        'format time': 'Time',
-        'format timestamp': 'Timestamp',
-        'format user': 'User',
-        'format number': 'Number',
-        'format uri': 'URI',
-        'format url': 'URL',
-        'format uuid': 'UUID',
+        'example.placeholder': 'Example',
+        'latitude.placeholder': 'Latitude (e.g., 40.7128)',
+        'longitude.placeholder': 'Longitude (e.g., -74.0060)',
+
+        'cancel-button.label': 'Cancel',
+        'save-button.label': 'Save',
+        'create-text.label': 'Create text',
+
+        // TypeFormat
+        'format.boolean.label': 'Boolean',
+        'format.currency.label': 'Currency',
+        'format.date.label': 'Date',
+        'format.date-time.label': 'DateTime',
+        'format.did.label': 'DID',
+        'format.duration.label': 'Duration',
+        'format.dxn.label': 'DXN',
+        'format.email.label': 'Email',
+        'format.formula.label': 'Formula',
+        'format.hostname.label': 'Hostname',
+        'format.integer.label': 'Integer',
+        'format.json.label': 'JSON',
+        'format.lnglat.label': 'Geopoint',
+        'format.markdown.label': 'Markdown',
+        'format.percent.label': 'Percent',
+        'format.ref.label': 'Reference',
+        'format.regex.label': 'RegExp',
+        'format.string.label': 'String',
+        'format.single-select.label': 'Select',
+        'format.multi-select.label': 'Multi-select',
+        'format.text.label': 'Long text',
+        'format.time.label': 'Time',
+        'format.timestamp.label': 'Timestamp',
+        'format.user.label': 'User',
+        'format.number.label': 'Number',
+        'format.uri.label': 'URI',
+        'format.url.label': 'URL',
+        'format.uuid.label': 'UUID',
 
         // GeoPointField.
-        'latitude label': 'Latitude',
-        'longitude label': 'Longitude',
+        'latitude.label': 'Latitude',
+        'longitude.label': 'Longitude',
 
         // SelectOptionsField.
-        'select option label': 'Label',
-        'select option label placeholder': 'Option label',
-        'select option color': 'Color',
-        'select option delete': 'Delete',
-        'select option add': 'Add option',
+        'select-option.label': 'Label',
+        'select-option-label.placeholder': 'Option label',
+        'select-option-delete.button': 'Delete',
+        'select-option-add.button': 'Add option',
 
         // System schema message.
-        'system schema title': 'System type',
-        'system schema description': 'System type: cannot add or remove fields.',
+        'system-schema.title': 'System type',
+        'system-schema.description': 'System type: cannot add or remove fields.',
+        'remove.button': 'Remove',
       },
     },
   },

package/src/util/field-type.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { getAnnotation, isLiteralUnion } from '@dxos/effect';
+
+/**
+ * Detected field type for a schema property.
+ */
+export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
+
+export type SelectOption = {
+  value: string | number;
+  label?: string;
+};
+
+/**
+ * Detect the field type from an Effect Schema AST node.
+ */
+export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefined => {
+  if (isLiteralUnion(ast)) {
+    return 'select';
+  }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return 'struct';
+  }
+
+  switch (ast._tag) {
+    case 'BooleanKeyword':
+      return 'boolean';
+    case 'StringKeyword':
+      return 'string';
+    case 'NumberKeyword':
+      return 'number';
+  }
+
+  return undefined;
+};
+
+/**
+ * Extract select options from a literal union AST node.
+ * Reads title annotations from individual literals for labels.
+ */
+export const getSelectOptionsFromAst = (ast: SchemaAST.AST): SelectOption[] | undefined => {
+  if (!isLiteralUnion(ast)) {
+    return undefined;
+  }
+
+  return (ast as SchemaAST.Union<SchemaAST.Literal>).types.flatMap((literalNode) => {
+    const value = literalNode.literal;
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      return [];
+    }
+    const title = getAnnotation<string>(SchemaAST.TitleAnnotationId, false)(literalNode);
+    const label = title ?? (typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : String(value));
+    return [{ value, label }];
+  });
+};

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './field';
+export * from './field-type';
 export * from './formatting';
 export * from './properties';
 export * from './refs';

package/src/util/properties.test.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import { describe, test } from 'vitest';
+
+import { Annotation, JsonSchema, Type } from '@dxos/echo';
+
+import { getFormProperties } from './properties';
+
+describe('getFormProperties', () => {
+  test('filters out keyword fields annotated FormInputAnnotation.set(false)', ({ expect }) => {
+    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' }));
+
+    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    expect(names).toContain('name');
+    expect(names).not.toContain('hidden');
+  });
+
+  test('filters out struct fields annotated FormInputAnnotation.set(false)', ({ expect }) => {
+    // Regression: JsonSchema fields are a Schema.Struct; encodedBoundAST strips
+    // annotations from non-keyword inner types, which previously bypassed the
+    // form-input filter (e.g., Routine.input).
+    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' }));
+
+    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    expect(names).toContain('name');
+    expect(names).not.toContain('schema');
+  });
+
+  test('filters out array fields annotated FormInputAnnotation.set(false)', ({ expect }) => {
+    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' }));
+
+    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    expect(names).toContain('name');
+    expect(names).not.toContain('context');
+  });
+
+  test('preserves annotation when chained with .annotations()', ({ expect }) => {
+    // Regression: `.pipe(FormInputAnnotation.set(false)).annotations({...})` must
+    // not lose the form-input annotation.
+    const TestSchema = Schema.Struct({
+      name: Schema.optional(Schema.String),
+      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' }));
+
+    const names = getFormProperties(TestSchema.ast).map((prop) => prop.name);
+    expect(names).toContain('name');
+    expect(names).not.toContain('hidden');
+  });
+});