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

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

@@ -4,15 +4,24 @@
 
 import * as Option from 'effect/Option';
 import * as SchemaAST from 'effect/SchemaAST';
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
-import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
-import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Ref } from '@dxos/echo';
+import {
+  createJsonPath,
+  findNode,
+  getArrayElementType,
+  getDiscriminatedType,
+  isDiscriminatedUnion,
+  isNestedType,
+} from '@dxos/effect';
+import { useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../../translations';
 import { getFormProperties } from '../../../util';
 import { useFormValues } from '../Form';
-import { FormField, type FormFieldProps } from '../FormField';
+import { FormField, IconBlock, type FormFieldProps } from '../FormField';
 import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
 
 export type ArrayFieldProps = {
@@ -54,7 +63,13 @@ export const ArrayField = ({
   const handleAdd = useCallback(() => {
     const defaultValue =
       isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    values && onValueChange(type, [...values, defaultValue]);
+    // `values` is `undefined` on first render for arrays whose parent path
+    // hasn't been materialised in the form values yet (e.g. `package.repos`
+    // when the form starts with no `package`). `useFormValues`'s default-
+    // value effect would eventually backfill it to `[]`, but until then the
+    // old `values && ...` guard silently swallowed the click. Treat a
+    // missing array as empty so Add always produces `[defaultValue]`.
+    onValueChange(type, [...(values ?? []), defaultValue]);
   }, [onValueChange, type, elementType, values]);
 
   const handleDelete = useCallback(
@@ -71,48 +86,62 @@ export const ArrayField = ({
     return null;
   }
 
+  const renderItemAsObject = elementType && isNestedType(elementType) && !Ref.isRefType(elementType);
+
   return (
     <>
       {(layout !== 'static' || (values && values.length > 0)) && (
-        <FormFieldLabel readonly={readonly} label={label} asChild />
+        <div className='flex items-center gap-2'>
+          <div className='flex-1 min-w-0'>
+            <FormFieldLabel readonly={readonly} label={label} path={createJsonPath(path ?? [])} asChild />
+          </div>
+          {!readonly && layout !== 'static' && (
+            <IconBlock inline icon='ph--plus--regular' label={t('add-item.button')} onClick={handleAdd} />
+          )}
+        </div>
       )}
 
-      <div role='none' className='flex flex-col gap-2'>
+      <div className='flex flex-col'>
         {values?.map((_, index) => {
-          return (
-            <div role='none' key={index} className='grid grid-cols-[1fr_min-content] gap-2 last:mb-3'>
-              <FormField
-                autoFocus={index === values.length - 1}
-                type={elementType}
-                path={[...(path ?? []), index]}
-                readonly={readonly || layout === 'static'}
-                layout='inline'
-                {...props}
-              />
+          const isLast = index === values.length - 1;
+
+          // Object items: each row contains a recursively-rendered FormField
+          //   (multiple sub-rows for the object's fields) wrapped in a border,
+          //   with the delete button bottom-aligned next to it.
+          // Scalar items: a single-row inline FormField with a center-aligned
+          //   delete button. Refs and primitive arrays use this layout.
+          const fieldField = (
+            <FormField
+              {...props}
+              autoFocus={isLast}
+              type={elementType}
+              // Suppress the per-item header for object items only — the recursive
+              // form already renders labels for each sub-field. Scalar items
+              // (refs, primitives) keep the parent name so inline-layout
+              // children (e.g. RefField) have a real label to use as a
+              // fallback placeholder.
+              {...(renderItemAsObject && { name: null })}
+              path={[...(path ?? []), index]}
+              readonly={readonly || layout === 'static'}
+              layout={renderItemAsObject ? (layout === 'static' ? 'static' : undefined) : 'inline'}
+            />
+          );
 
+          return (
+            <div key={index} className='grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap'>
+              {fieldField}
               {!readonly && layout !== 'static' && (
-                <div role='none' className='flex flex-col h-full justify-end'>
-                  {/* NOTE: Aligns with center of last field if multi-field object. */}
-                  <div role='none' className='flex items-center h-[2rem]'>
-                    <IconButton
-                      icon='ph--x--regular'
-                      iconOnly
-                      label={t('button remove')}
-                      onClick={() => handleDelete(index)}
-                      classNames='self-center'
-                    />
-                  </div>
-                </div>
+                <IconBlock
+                  inline={!renderItemAsObject}
+                  icon='ph--x--regular'
+                  label={t('remove-item.button')}
+                  onClick={() => handleDelete(index)}
+                />
               )}
             </div>
           );
         })}
       </div>
-
-      {/* TODO(burdon): Get label from schema. */}
-      {!readonly && layout !== 'static' && (
-        <IconButton classNames='flex w-full' icon='ph--plus--regular' label={t('add field')} onClick={handleAdd} />
-      )}
     </>
   );
 };

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

@@ -0,0 +1,101 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { format as formatDate } from 'date-fns';
+import React, { useCallback } from 'react';
+
+import { Format } from '@dxos/echo';
+import { Input } from '@dxos/react-ui';
+
+import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
+
+/**
+ * Stored value shapes:
+ * - `Format.DateTime` -> ISO 8601 (`2018-11-13T20:20:39.000Z`).
+ * - `Format.Date`     -> `YYYY-MM-DD`.
+ * - `Format.Time`     -> `HH:mm:ss`.
+ *
+ * Segmented input value shapes (react-aria-components-backed):
+ * - `Input.DateTime` -> `YYYY-MM-DDTHH:mm` in local time.
+ * - `Input.Date`     -> `YYYY-MM-DD`.
+ * - `Input.Time`     -> `HH:mm`.
+ */
+
+/** ISO 8601 → `YYYY-MM-DDTHH:mm` in the user's local timezone. */
+const isoToLocalDateTime = (value: string | undefined): string => {
+  if (!value) {
+    return '';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return formatDate(date, "yyyy-MM-dd'T'HH:mm");
+};
+
+/** `YYYY-MM-DDTHH:mm` (local) → ISO 8601 with timezone. */
+const localDateTimeToIso = (value: string): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  // Treat the input as local time. `new Date('YYYY-MM-DDTHH:mm')` parses as local.
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+};
+
+export const DateField = ({
+  type,
+  format,
+  readonly,
+  placeholder: _placeholder,
+  onValueChange,
+  onBlur: _onBlur,
+  ...props
+}: FormFieldComponentProps<string>) => {
+  const handleSimpleChange = useCallback((next: string) => onValueChange(type, next), [type, onValueChange]);
+
+  const handleDateTimeChange = useCallback(
+    (next: string) => {
+      const iso = localDateTimeToIso(next);
+      onValueChange(type, iso as string);
+    },
+    [type, onValueChange],
+  );
+
+  return (
+    <FormFieldWrapper<string> readonly={readonly} format={format} {...props}>
+      {({ value }) => {
+        switch (format) {
+          case Format.TypeFormat.Date:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.Date
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={value ?? ''}
+                  onValueChange={handleSimpleChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+          case Format.TypeFormat.Time:
+            return <Input.Time disabled={!!readonly} value={value ?? ''} onValueChange={handleSimpleChange} />;
+          case Format.TypeFormat.DateTime:
+          default:
+            return (
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+                <Input.DateTime
+                  classNames='min-w-0 overflow-hidden'
+                  disabled={!!readonly}
+                  value={isoToLocalDateTime(value)}
+                  onValueChange={handleDateTimeChange}
+                />
+                <Input.TriggerIcon classNames='h-full' />
+              </div>
+            );
+        }
+      }}
+    </FormFieldWrapper>
+  );
+};

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

@@ -8,12 +8,14 @@ import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const GeoPointField = ({
   type,
   label,
+  jsonPath,
   readonly,
   layout,
   getStatus,
@@ -58,21 +60,23 @@ export const GeoPointField = ({
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} asChild />}
+      {layout !== 'inline' && (
+        <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} asChild />
+      )}
       {layout === 'static' ? (
         <LatLng {...value} />
       ) : (
-        <div role='none' className='grid grid-cols-2 gap-2'>
+        <div className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('latitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-90'
                 max='90'
                 disabled={!!readonly}
-                placeholder={t('latitude placeholder')}
+                placeholder={t('latitude.placeholder')}
                 value={latitudeText ?? ''}
                 onChange={handleChange('latitude', setLatitudeText)}
                 onBlur={onBlur}
@@ -81,14 +85,14 @@ export const GeoPointField = ({
           </div>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('longitude label')}</Input.Label>}
+              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
                 min='-180'
                 max='180'
                 disabled={!!readonly}
-                placeholder={t('longitude placeholder')}
+                placeholder={t('longitude.placeholder')}
                 value={longitudeText ?? ''}
                 onChange={handleChange('longitude', setLongitudeText)}
                 onBlur={onBlur}
@@ -106,7 +110,7 @@ const LatLng = ({ latitude = 0, longitude = 0 }: GeoLocation) => {
   const lngHem = longitude >= 0 ? 'E' : 'W';
 
   return (
-    <span className='inline-flex items-center gap-1'>
+    <span className='inline-flex items-center gap-form-gap'>
       <span>
         <span>{Math.abs(latitude).toFixed(5)}</span>
         <span className='text-subdued'>°{latHem}</span>

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

@@ -0,0 +1,146 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { type Database, Obj, Ref, Type } from '@dxos/echo';
+import { AtomRef } from '@dxos/echo-atom';
+import { useType as defaultUseType } from '@dxos/echo-react';
+import {
+  type JsonPath,
+  ReferenceAnnotationId,
+  type ReferenceAnnotationValue,
+  splitJsonPath,
+} from '@dxos/echo/internal';
+import { findAnnotation } from '@dxos/effect';
+import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
+
+import { Form, omitId } from '../Form';
+import { Nesting } from '../FormField';
+import { FormFieldLabel } from '../FormFieldComponent';
+import { type RefFieldProps } from './RefField';
+
+/**
+ * Renders a referenced object's own fields inline (a nested form bound to the
+ * target) rather than the {@link RefField} picker. Activated by
+ * `FormInlineAnnotation.set(true)` on the `Ref` property.
+ *
+ * The nested form edits the target object directly: each changed path is
+ * written back via `Obj.setValue` within an `Obj.update`, mirroring
+ * `ObjectProperties` (without the synthetic meta-tags row).
+ */
+export const InlineRefField = (props: RefFieldProps) => {
+  const {
+    type,
+    readonly,
+    label,
+    jsonPath,
+    layout,
+    db,
+    getValue,
+    onValueChange,
+    onCreate,
+    useType = defaultUseType,
+  } = props;
+  const { t } = useTranslation(translationKey);
+
+  const reference = getValue() as Ref.Ref<any> | undefined;
+  const typename = useMemo(
+    () => (type ? findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
+    [type],
+  );
+
+  // Empty ref: offer to create the referenced object so the inline form has a target.
+  const createType = useType(db, typename);
+  const handleCreate = useCallback(async () => {
+    if (!createType || !onCreate) {
+      return;
+    }
+    const newObject = await onCreate(createType, {});
+    if (newObject) {
+      onValueChange(type, Ref.make(newObject));
+    }
+  }, [createType, onCreate, type, onValueChange]);
+
+  if (readonly && !reference) {
+    return null;
+  }
+
+  return (
+    <Input.Root>
+      {layout !== 'inline' && <FormFieldLabel readonly={readonly} label={label} path={jsonPath} />}
+      {reference ? (
+        <InlineForm reference={reference} db={db} readonly={readonly} useType={useType} />
+      ) : (
+        !readonly &&
+        onCreate && (
+          <Button classNames='w-full gap-form-gap' disabled={!createType || !db} onClick={() => void handleCreate()}>
+            <Icon icon='ph--plus--regular' size={4} />
+            <span>{label || t('ref-field.placeholder')}</span>
+          </Button>
+        )
+      )}
+    </Input.Root>
+  );
+};
+
+type InlineFormProps = {
+  reference: Ref.Ref<any>;
+  db?: Database.Database;
+  readonly?: boolean;
+  // Accepts both the generic `defaultUseType` and `RefFieldProps['useType']`.
+  useType?: (db?: Database.Database, typename?: string) => Type.AnyEntity | undefined;
+};
+
+const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: InlineFormProps) => {
+  const target = useAtomValue(useMemo(() => AtomRef.make(reference), [reference]));
+  const typename = target ? (Obj.getTypename(target) ?? undefined) : undefined;
+  const typeFromRegistry = useType(db, typename);
+  const targetType = (target && Obj.getType(target)) || typeFromRegistry;
+  // Drop the ECHO `id` property (mirrors `ObjectProperties` via `withMetaTags`);
+  // otherwise the nested form renders an "Id" field. Hidden fields
+  // (`FormInputAnnotation.set(false)`) are already filtered by the field set.
+  const formSchema = useMemo(() => (targetType ? omitId(Type.getSchema(targetType)) : undefined), [targetType]);
+  const defaultValues = useMemo(() => (target ? { ...target } : {}), [target]);
+
+  // `formSchema` is resolved at runtime (the referenced object's schema), so the
+  // form's value type is not statically known here — `any` at this form-value
+  // boundary mirrors `ObjectProperties`. Each changed path is written back to the
+  // live target via `Obj.setValue`.
+  const handleChange = useCallback(
+    (values: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid || !target) {
+        return;
+      }
+      const changedPaths = (Object.keys(changed) as JsonPath[]).filter((path) => changed[path]);
+      if (changedPaths.length === 0) {
+        return;
+      }
+      Obj.update(target, () => {
+        for (const path of changedPaths) {
+          const parts = splitJsonPath(path);
+          Obj.setValue(target, parts, Obj.getValue(values, parts));
+        }
+      });
+    },
+    [target],
+  );
+
+  if (!target || !formSchema) {
+    return null;
+  }
+
+  return (
+    <Nesting>
+      <Form.Root schema={formSchema} defaultValues={defaultValues as any} db={db} onValuesChanged={handleChange}>
+        <Form.Content>
+          <Form.FieldSet readonly={readonly} />
+        </Form.Content>
+      </Form.Root>
+    </Nesting>
+  );
+};

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

@@ -0,0 +1,206 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+import { expect, userEvent } from 'storybook/test';
+
+import { Filter, Format, Obj, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../testing';
+import { Form } from '../Form';
+
+//
+// String-backed markdown.
+//
+
+const StringSchema = Schema.Struct({
+  notes: Schema.String.pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown)).annotations({ title: 'Notes' }),
+});
+
+const StringStory = () => (
+  <TestLayout>
+    <Form.Root schema={StringSchema} defaultValues={{ notes: '# Hello\n\nMarkdown text *here*.' }}>
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  </TestLayout>
+);
+
+//
+// Ref<Text>-backed markdown.
+//
+
+const TextNoteHolder = Schema.Struct({
+  instructions: Ref.Ref(Text.Text)
+    .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+    .annotations({ title: 'Instructions' }),
+});
+
+const RefStory = () => {
+  const { space } = useClientStory();
+  const [text] = useQuery(space?.db, Filter.type(Text.Text));
+  const values = useMemo(() => (text ? { instructions: Ref.make(text) } : undefined), [text]);
+
+  if (!space || !values) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={TextNoteHolder} values={values as any} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+//
+// Ref<Text> empty — shows the create button.
+//
+
+const EmptyRefSchema = Schema.Struct({
+  instructions: Schema.optional(
+    Ref.Ref(Text.Text)
+      .pipe(Format.FormatAnnotation.set(Format.TypeFormat.Markdown))
+      .annotations({ title: 'Instructions' }),
+  ),
+});
+
+const EmptyRefStory = () => {
+  const { space } = useClientStory();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <TestLayout>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <Form.Root schema={EmptyRefSchema} defaultValues={{}} db={space.db}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/MarkdownField',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const StringBacked: Story = {
+  render: () => <StringStory />,
+};
+
+// Regression test: keystrokes into a string-backed markdown field must not
+// blur the editor. Previously the EditorView was destroyed and recreated on
+// every change because `onChange` was a useTextEditor dep and form callbacks
+// are unstable across renders.
+export const StringBackedKeepsFocus: Story = {
+  render: () => (
+    <TestLayout>
+      <Form.Root schema={StringSchema} defaultValues={{ notes: '' }}>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  ),
+  play: async ({ canvasElement }) => {
+    const waitFor = async <T,>(predicate: () => T | null | undefined, message: string): Promise<T> => {
+      for (let attempt = 0; attempt < 50; attempt++) {
+        const value = predicate();
+        if (value) {
+          return value;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      throw new Error(message);
+    };
+
+    const editorRoot = await waitFor(
+      () => canvasElement.querySelector<HTMLElement>('.cm-editor'),
+      'CodeMirror editor root (.cm-editor) not found',
+    );
+    const editorContent = editorRoot.querySelector<HTMLElement>('.cm-content')!;
+    await expect(editorContent).toBeVisible();
+
+    // Focus editor and wait for focus to settle inside the editor root.
+    editorContent.focus();
+    await waitFor(() => (editorRoot.contains(document.activeElement) ? true : null), 'Editor did not receive focus');
+
+    // Type several characters; focus must be preserved inside the editor root
+    // after every keystroke. Regression: previously the EditorView was
+    // destroyed and recreated on every change, which detached the focused
+    // contentDOM and blurred the input.
+    const phrase = 'hello world';
+    for (const ch of phrase) {
+      await userEvent.keyboard(ch);
+      await expect(editorRoot.contains(document.activeElement)).toBe(true);
+    }
+
+    await expect(editorContent).toHaveTextContent(phrase);
+  },
+};
+
+export const RefPopulated: Story = {
+  render: () => <RefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+      onCreateSpace: async ({ space }) => {
+        space.db.add(Obj.make(Text.Text, { content: '# Magazine brief\n\nLong-form text describing what to gather.' }));
+      },
+    }),
+  ],
+};
+
+export const RefEmpty: Story = {
+  render: () => <EmptyRefStory />,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Text.Text],
+    }),
+  ],
+};