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

package/src/components/Form/fields/MarkdownField.tsx

@@ -2,77 +2,167 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Input, type TextAreaProps } from '@dxos/react-ui';
+import { type Database, Obj, Ref } from '@dxos/echo';
+import { AtomRef } from '@dxos/echo-atom';
+import { createDocAccessor } from '@dxos/echo-db';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { Editor, useBasicMarkdownExtensions } from '@dxos/react-ui-editor';
+import { Text } from '@dxos/schema';
+import { createDataExtensions } from '@dxos/ui-editor';
+
+import { translationKey } from '#translations';
 
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
+const editorClassNames =
+  'transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2';
+
+/**
+ * Form field that edits a markdown value in a CodeMirror editor.
+ * Supports two backings:
+ * - `Schema.String` annotated with `Format.TypeFormat.Markdown`: edited as plain text via `getValue`/`onValueChange`.
+ * - `Ref<Text>` annotated with `Format.TypeFormat.Markdown`: edited in-place via an Automerge doc accessor.
+ *   When the ref is empty and a database is available, a create button is shown to allocate a new Text.
+ */
 export const MarkdownField = ({
   type,
   readonly,
   label,
   placeholder,
   layout,
+  db,
   getStatus,
   getValue,
   onValueChange,
-  onBlur,
 }: FormFieldComponentProps) => {
   const { status, error } = getStatus();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const isRef = Ref.isRefType(type);
+  const value = getValue();
 
-  // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
-  //  since we're using a textarea element and the user needs to be able to enter new lines.
+  if ((readonly || layout === 'static') && value == null) {
+    return null;
+  }
 
-  const adjustHeight = useCallback(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.blockSize = 'auto'; // For measurement.
-      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
-    }
-  }, []);
+  const renderEditor = () => {
+    if (isRef) {
+      const reference = value as Ref.Ref<any> | undefined;
+      if (reference) {
+        return <RefMarkdownEditor reference={reference} placeholder={placeholder} />;
+      }
 
-  // Adjust height on initial render.
-  useEffect(() => {
-    adjustHeight();
-  }, [adjustHeight]);
+      if (readonly) {
+        return null;
+      }
 
-  // Adjust height when the content changes.
-  useEffect(() => {
-    adjustHeight();
-  }, [getValue(), adjustHeight]);
+      return <CreateTextButton db={db} disabled={!db} onCreate={(ref) => onValueChange(type, ref)} />;
+    }
 
-  const handleChange = useCallback<NonNullable<TextAreaProps['onChange']>>(
-    (event) => onValueChange(type, event.target.value),
-    [type, onValueChange],
-  );
+    return (
+      <StringMarkdownEditor
+        value={(value as string | undefined) ?? ''}
+        placeholder={placeholder}
+        readonly={!!readonly}
+        onChange={(next) => onValueChange(type, next)}
+      />
+    );
+  };
 
-  const value = getValue();
-  if ((readonly || layout === 'static') && !value) {
-    return null;
-  }
+  const renderStatic = () => {
+    if (isRef) {
+      const reference = value as Ref.Ref<any> | undefined;
+      return reference ? <RefStaticText reference={reference} /> : null;
+    }
+    return <p className='whitespace-pre-wrap'>{(value as string | undefined) ?? ''}</p>;
+  };
 
-  // TODO(burdon): Use Markdown Editor.
   return (
     <Input.Root validationValence={status}>
       {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
-      {layout === 'static' ? (
-        <p>{value}</p>
-      ) : (
-        <Input.TextArea
-          ref={textareaRef}
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={value ?? ''}
-          classNames={'min-h-auto max-h-40 overflow-auto'}
-          onChange={handleChange}
-          onBlur={onBlur}
-          style={{ resize: 'none' }}
-          spellCheck={false}
-        />
-      )}
+      {layout === 'static' ? renderStatic() : renderEditor()}
       {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );
 };
+
+/** Read-only static rendering for a `Ref<Text>` value: resolve the ref and print its content. */
+const RefStaticText = ({ reference }: { reference: Ref.Ref<any> }) => {
+  const text = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  if (!text?.content) {
+    return null;
+  }
+  return <p className='whitespace-pre-wrap'>{text.content}</p>;
+};
+
+type RefMarkdownEditorProps = {
+  reference: Ref.Ref<any>;
+  placeholder?: string;
+};
+
+const RefMarkdownEditor = ({ reference, placeholder }: RefMarkdownEditorProps) => {
+  const text = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  const dataExtensions = useMemo(
+    () =>
+      text ? [createDataExtensions({ id: reference.dxn.toString(), text: createDocAccessor(text, ['content']) })] : [],
+    [text, reference],
+  );
+  const extensions = useBasicMarkdownExtensions({ placeholder, extensions: dataExtensions });
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Editor.Root>
+      <Editor.View classNames={editorClassNames} extensions={extensions} />
+    </Editor.Root>
+  );
+};
+
+type StringMarkdownEditorProps = {
+  value: string;
+  placeholder?: string;
+  readonly?: boolean;
+  onChange: (value: string) => void;
+};
+
+const StringMarkdownEditor = ({ value, placeholder, readonly, onChange }: StringMarkdownEditorProps) => {
+  const extensions = useBasicMarkdownExtensions({ placeholder });
+  const handleChange = useCallback((next: string) => onChange(next), [onChange]);
+
+  return (
+    <Editor.Root>
+      <Editor.View
+        classNames={editorClassNames}
+        extensions={extensions}
+        value={value}
+        onChange={readonly ? undefined : handleChange}
+      />
+    </Editor.Root>
+  );
+};
+
+type CreateTextButtonProps = {
+  db?: Database.Database;
+  disabled?: boolean;
+  onCreate: (ref: Ref.Ref<Text.Text>) => void;
+};
+
+const CreateTextButton = ({ db, disabled, onCreate }: CreateTextButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const handleClick = useCallback(() => {
+    if (!db) {
+      return;
+    }
+    const text = db.add(Obj.make(Text.Text, { content: '' }));
+    onCreate(Ref.make(text));
+  }, [db, onCreate]);
+
+  return (
+    <Button onClick={handleClick} disabled={disabled}>
+      <Icon icon='ph--plus--regular' size={4} />
+      <span>{t('create-text.label')}</span>
+    </Button>
+  );
+};

package/src/components/Form/fields/RefField.tsx

@@ -2,23 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos/lit-ui/dx-tag-picker.pcss';
-
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
+import '@dxos/lit-ui/dx-tag-picker.pcss';
 import { type Database, Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
+import { useQuery, useSchema as defaultUseSchema } from '@dxos/echo-react';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
-import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { ParentLabelAnnotationId } from '@dxos/schema';
-import { mx } from '@dxos/ui-theme';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
-import { omitId } from '../Form';
+import { omitHiddenFormFields, omitId } from '../Form';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 // TODO(burdon): Factor out.
@@ -34,7 +33,7 @@ const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results, {
     return { id, label: label ?? id };
   });
 
-const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
+const defaultUseResults: NonNullable<RefFieldProps['useResults']> = (db, typename) =>
   useQuery(
     db,
     typename
@@ -46,12 +45,22 @@ const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typen
   );
 
 export type RefFieldProps = FormFieldComponentProps &
-  Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
+  Pick<
+    ObjectPickerContentProps,
+    'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'
+  > & {
     db?: Database.Database;
-    resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    schemaHook?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    // TODO(burdon): Replace hooks with callbacks.
+    useSchema?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
     getOptions?: (objects: Entity.Any[], options?: { parentLabel?: boolean }) => RefOption[];
-    onCreate?: (schema: Type.AnyEntity, values: any) => void;
+    /**
+     * Persist a newly-created object. Called after the user fills out the
+     * inline create form and clicks Save. Should add the object to the
+     * database and return it (sync or async). The returned object is then
+     * wired into this slot's form value as a Ref.
+     */
+    onCreate?: (schema: Type.AnyEntity, values: any) => Obj.Unknown | Promise<Obj.Unknown> | undefined | void;
   };
 
 export const RefField = (props: RefFieldProps) => {
@@ -66,9 +75,10 @@ export const RefField = (props: RefFieldProps) => {
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap,
     db,
-    resultsHook: useResults = defaultResultsHook,
-    schemaHook: useSchema = useSchema$,
+    useSchema = defaultUseSchema,
+    useResults = defaultUseResults,
     getOptions = defaultGetOptions,
     onCreate,
     onValueChange,
@@ -89,42 +99,63 @@ export const RefField = (props: RefFieldProps) => {
 
   const handleGetValue = useCallback(() => {
     const formValue = getValue();
+    // Match form-value Refs against options by the bare object id (last DXN
+    // segment), not by full DXN string. Ref.make uses
+    // `DXN.fromLocalObjectId(id)` (`dxn:echo:@:<id>`), but
+    // `Entity.getDXN(obj)` on a registered object produces the space-scoped
+    // form (`dxn:echo:<spaceId>:<id>`). String-comparing the two never
+    // matches, so the just-created Ref's option lookup fails and the slot
+    // displays as empty even though the underlying form value IS set.
+    const dxnToObjectId = (dxn: string): string => dxn.split(':').pop() ?? dxn;
 
     const unknownToRefOption = (value: unknown) => {
       const isRef = Ref.isRef(value);
       if (isRef || isRefSnapshot(value)) {
         const dxnString = isRef ? value.dxn.toString() : value['/'];
-        const matchingOption = options.find((option) => option.id === dxnString);
+        const objectId = dxnToObjectId(dxnString);
+        const matchingOption = options.find((option) => dxnToObjectId(option.id) === objectId);
         if (matchingOption) {
           return matchingOption;
         }
       }
+
       return undefined;
     };
 
     return unknownToRefOption(formValue);
   }, [options, getValue]);
 
-  const handleUpdate = useCallback(
-    (id: string | undefined) => {
-      const item = options.find((option) => option.id === id);
-      const ref = item ? Ref.fromDXN(DXN.parse(item.id)) : undefined;
-      onValueChange(type, ref);
-    },
-    [options, type, onValueChange],
-  );
-
   const item = handleGetValue();
   const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
   const createSchema = useSchema(db, typename);
 
+  // Lift the popover open state so we can dismiss it after a successful create.
+  const [open, setOpen] = useState(false);
+
   const handleCreate = useCallback(
-    (values: any) => {
-      if (createSchema && onCreate) {
-        onCreate(createSchema, values);
+    async (values: any) => {
+      if (!createSchema || !onCreate) {
+        return;
+      }
+      const newObject = await onCreate(createSchema, values);
+      if (newObject) {
+        // Wire the newly-created object into this slot's form value. ArrayField
+        // owns the array; this RefField represents a single slot, so writing a
+        // Ref via `onValueChange` populates that slot.
+        onValueChange(type, Ref.make(newObject));
       }
+      setOpen(false);
+    },
+    [createSchema, onCreate, type, onValueChange],
+  );
+
+  const handleUpdate = useCallback(
+    (id: string | undefined) => {
+      const item = options.find((option) => option.id === id);
+      const ref = item ? Ref.fromDXN(DXN.parse(item.id)) : undefined;
+      onValueChange(type, ref);
     },
-    [createSchema, onCreate],
+    [options, type, onValueChange],
   );
 
   const handleSelect = useCallback(
@@ -148,25 +179,25 @@ export const RefField = (props: RefFieldProps) => {
       <div>
         {readonly ? (
           !item ? (
-            <p className={mx('text-description', 'mb-2')}>{t('empty readonly ref field label')}</p>
+            <p className='text-description mb-2'>{t('empty-readonly-ref-field.label')}</p>
           ) : (
             <DxAnchor key={item.id} dxn={item.id} rootclassname='me-1'>
               {item.label}
             </DxAnchor>
           )
         ) : (
-          <ObjectPicker.Root>
+          <ObjectPicker.Root open={open} onOpenChange={setOpen}>
             <ObjectPicker.Trigger asChild classNames='p-0'>
               {item ? (
-                <div className='flex gap-2 w-full'>
+                <div className='flex gap-form-gap w-full'>
                   <Input.Root key={item.id}>
                     <Input.TextInput value={item.label} readOnly classNames='w-full' />
                   </Input.Root>
                 </div>
               ) : (
-                <Button classNames='w-full text-start gap-2'>
-                  <div role='none' className='grow overflow-hidden'>
-                    <span className='flex truncate text-description'>{placeholder ?? t('ref field placeholder')}</span>
+                <Button classNames='w-full text-start gap-form-gap'>
+                  <div className='grow overflow-hidden'>
+                    <span className='truncate text-description'>{placeholder ?? t('ref-field.placeholder')}</span>
                   </div>
                   <Icon size={3} icon='ph--caret-down--bold' />
                 </Button>
@@ -177,10 +208,14 @@ export const RefField = (props: RefFieldProps) => {
                 classNames='dx-card-popover-width'
                 options={options}
                 selectedIds={selectedIds}
-                createSchema={createSchema && omitId(createSchema)}
+                // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
+                // form's validator doesn't reject required-but-hidden fields
+                // such as backing-object refs supplied by a `FactoryAnnotation`.
+                createSchema={createSchema && omitHiddenFormFields(omitId(createSchema))}
                 createOptionLabel={createOptionLabel}
                 createOptionIcon={createOptionIcon}
                 createInitialValuePath={createInitialValuePath}
+                createFieldMap={createFieldMap}
                 onCreate={handleCreate}
                 onSelect={handleSelect}
               />

package/src/components/Form/fields/SelectOptionField.stories.tsx

@@ -9,10 +9,10 @@ import React, { useState } from 'react';
 import { SelectOption } from '@dxos/echo/internal';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../../translations';
+import { translations } from '#translations';
+
 import { TestLayout } from '../../testing';
 import { Form } from '../Form';
-
 import { SelectOptionField } from './SelectOptionField';
 
 const schema = Schema.Struct({
@@ -37,10 +37,12 @@ const DefaultStory = () => {
         fieldMap={{ options: SelectOptionField }}
         onSave={(values) => setValues(values)}
       >
-        <Form.Content>
-          <Form.FieldSet />
-          <Form.Actions />
-        </Form.Content>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Actions />
+          </Form.Content>
+        </Form.Viewport>
       </Form.Root>
     </TestLayout>
   );

package/src/components/Form/fields/SelectOptionField.tsx

@@ -9,9 +9,10 @@ import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { hues, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../../translations';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const SelectOptionField = ({
@@ -119,7 +120,7 @@ export const SelectOptionField = ({
   return (
     <Input.Root validationValence={status}>
       <FormFieldLabel error={error} readonly={readonly} label={label} />
-      <div role='none'>
+      <div>
         {options && (
           <List.Root
             items={options}
@@ -134,7 +135,7 @@ export const SelectOptionField = ({
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-xs']}
+                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -146,19 +147,18 @@ export const SelectOptionField = ({
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: osTranslations })}
+                          label={t(selected === item.id ? 'collapse.label' : 'expand.label', { ns: osTranslations })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='flex flex-col p-form-padding gap-1 dx-density-fine'>
-                          {/* 16px to match drag handle width. */}
-                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
+                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-fine'>
+                          <Input.Label classNames='text-xs'>{t('select-option.label')}</Input.Label>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
                             <Input.TextInput
                               disabled={!!readonly}
-                              placeholder={t('select option label placeholder')}
+                              placeholder={t('select-option-label.placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
                               onChange={handleTitleChange(item.id)}
@@ -170,7 +170,7 @@ export const SelectOptionField = ({
                               disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
-                              label={t('select option delete')}
+                              label={t('select-option-delete.button')}
                               onClick={() => handleDelete(item.id)}
                             />
                           </div>
@@ -182,7 +182,7 @@ export const SelectOptionField = ({
                 <IconButton
                   variant='ghost'
                   icon='ph--plus--regular'
-                  label={t('select option add')}
+                  label={t('select-option-add.button')}
                   onClick={handleAdd}
                   disabled={!!readonly}
                   classNames='w-full'

package/src/components/Form/fields/TextField.tsx

@@ -12,8 +12,8 @@ export const TextField = ({
   type,
   readonly,
   placeholder,
-  onValueChange,
   onBlur,
+  onValueChange,
   ...props
 }: FormFieldComponentProps<string>) => {
   const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
@@ -29,8 +29,8 @@ export const TextField = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={value}
-          onChange={handleChange}
           onBlur={onBlur}
+          onChange={handleChange}
         />
       )}
     </FormFieldWrapper>

package/src/components/Form/fields/TupleField.tsx

@@ -32,7 +32,7 @@ export const TupleField = ({
   return (
     <Input.Root validationValence={status}>
       <FormFieldLabel error={error} readonly={readonly} label={label} />
-      <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
+      <div className={mx('grid gap-form-gap', gridCols[binding.length - 1])}>
         {binding.map((prop) => (
           <Input.TextInput
             key={prop}

package/src/components/ObjectForm/ObjectForm.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { isNonNullable } from '@dxos/util';
+
+import { translationKey } from '#translations';
+
+import { Form, type FormFieldMap, omitId } from '../Form';
+
+export type ObjectFormProps = {
+  schema: Schema.Schema.AnyNoContext;
+  object: Obj.Unknown;
+};
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const db = Obj.getDatabase(object);
+  const meta = Obj.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
+  const formSchema = useMemo(
+    () =>
+      omitId(
+        Schema.Struct({
+          tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+        }).pipe(Schema.extend(schema)),
+      ),
+    [schema],
+  );
+
+  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+    invariant(db);
+    invariant(Type.isObjectSchema(schema));
+    const newObject = db.add(Obj.make(schema, values));
+    if (Obj.instanceOf(Tag.Tag, newObject)) {
+      Obj.update(object, (object) => {
+        Obj.getMeta(object).tags = [...(Obj.getMeta(object).tags ?? []), Obj.getDXN(newObject).toString()];
+      });
+    }
+  }, []);
+
+  // TODO(wittjosiah): Use FormRootProps type.
+  const handleChange = useCallback(
+    ({ tags, ...values }: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+      // Handle tags separately using Obj.update.
+      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+      if (hasTagsChange) {
+        Obj.update(object, (object) => {
+          Obj.getMeta(object).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+        });
+      }
+
+      // Handle other property changes.
+      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+      if (nonTagPaths.length > 0) {
+        Obj.update(object, () => {
+          for (const path of nonTagPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values, parts);
+            Obj.setValue(object, parts, value);
+          }
+        });
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form.Root
+      schema={formSchema}
+      defaultValues={values}
+      createTypename={Type.getTypename(Tag.Tag)}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add-tag.label', { ns: translationKey }]}
+      createInitialValuePath='label'
+      createFieldMap={createFieldMap}
+      db={db}
+      onValuesChanged={handleChange}
+      onCreate={handleCreate}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/components/ObjectForm/index.ts

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