@dxos/react-ui-form 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/components/Form/Form.theme.ts

@@ -0,0 +1,86 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type VariantProps, mx, tv } from '@dxos/ui-theme';
+
+/** Visual variants for {@link Form}. `settings` is the bordered two-column settings-panel look. */
+export type FormVariant = NonNullable<VariantProps<typeof formStyles>['variant']>;
+
+/** Non-className behavior flags, keyed by {@link FormVariant}. */
+export type FormBehavior = { showDescription: boolean };
+
+const formStyles = tv({
+  slots: {
+    viewport: '',
+    content: '',
+    section: 'flex flex-col py-form-section-gap first:pt-0',
+    group: 'flex flex-col gap-3 p-trim-md border border-separator rounded-sm',
+    sectionHeader: '',
+    sectionTitle: 'text-lg',
+    sectionDescription: 'text-description',
+    fieldSet: '',
+    field: '',
+    fieldLabel: 'h-8 grid grid-cols-[1fr_auto_auto] items-center select-none',
+    fieldLabelText: '',
+    fieldDescription: 'text-description',
+    fieldControl: '',
+    fieldValidation: '',
+    // Action bar (cancel/save), equal-width columns flowing horizontally.
+    actions: 'grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding',
+    // Standalone submit row (full-width primary button).
+    submit: 'flex w-full pt-form-padding',
+    // Collapsible field-set body: indented column of sub-fields.
+    fieldSetBody: 'flex flex-col gap-2 px-2 pb-2',
+    // Bordered container wrapping a collapsible nested group, plus its top spacing.
+    fieldSetBox: 'border border-subdued-separator rounded-sm',
+    fieldSetBoxOuter: 'pt-trim-md',
+  },
+  variants: {
+    variant: {
+      default: {},
+      settings: {
+        content: 'dx-document',
+        // Gap on the section spaces its direct children — section title/description and, for action
+        // panels, the `Form.Row`s placed directly in the section (which have no `fieldSet` wrapper).
+        section: 'py-form-section-gap! gap-trim-md',
+        sectionHeader: 'pb-form-section-gap',
+        sectionTitle: 'px-trim-md text-xl',
+        sectionDescription: 'px-trim-md',
+        // No top padding: the section gap already separates the field set from the title above it.
+        fieldSet: 'flex flex-col gap-trim-md',
+        field: mx(
+          'grid',
+          'grid-cols-1 [grid-template-areas:"header""description""control""validation"]',
+          'md:grid-cols-2 md:[grid-template-areas:"header_header""description_control""validation_validation"]',
+          'gap-x-trim-lg gap-y-0 p-trim-md border border-input-separator rounded-md',
+        ),
+        fieldLabel: '[grid-area:header]',
+        fieldLabelText: 'text-base-fg text-lg',
+        fieldDescription: '[grid-area:description] pt-1 text-description',
+        fieldControl: '[grid-area:control] flex justify-end items-start md:text-right pt-3 md:pt-0',
+        fieldValidation: '[grid-area:validation]',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+/** {@link Form} theme template: a tailwind-variants recipe (`styles`) plus non-class `behavior`. */
+export const formTheme = {
+  styles: formStyles,
+  behavior: {
+    default: {
+      showDescription: false,
+    },
+    settings: {
+      showDescription: true,
+    },
+  } satisfies Record<FormVariant, FormBehavior>,
+};
+
+/** Slot names of {@link formTheme.styles}, for `bridgeTv` registration. */
+// Object.keys widens to string[]; the slot names are statically known.
+export const formSlots = Object.keys(formTheme.styles()) as Array<keyof ReturnType<typeof formTheme.styles>>;

package/src/components/Form/Form.tsx

@@ -8,8 +8,10 @@ import {
   FormContent,
   type FormContentProps,
   FormError,
-  FormFieldSet,
-  FormLayout,
+  FormFieldSetController,
+  FormGroup,
+  type FormGroupProps,
+  FormLayoutController,
   type FormLayoutProps,
   FormRoot,
   type FormRootProps,
@@ -20,27 +22,31 @@ import {
   FormViewport,
   type FormViewportProps,
 } from './FormControls';
-import { FormFieldLabel } from './FormField';
+import { FormFieldLabel, FormRow, type FormRowProps } from './FormField';
 
 export const Form = {
   Root: FormRoot,
   Viewport: FormViewport,
   Content: FormContent,
   Section: FormSection,
-  FieldSet: FormFieldSet,
-  Layout: FormLayout,
+  Group: FormGroup,
+  FieldSet: FormFieldSetController,
+  Layout: FormLayoutController,
   Label: FormFieldLabel,
+  Row: FormRow,
   Actions: FormActions,
   Submit: FormSubmit,
   Error: FormError,
 };
 
 export type {
-  FormRootProps,
-  FormViewportProps,
+  FormActionsProps,
   FormContentProps,
-  FormSectionProps,
+  FormGroupProps,
   FormLayoutProps,
-  FormActionsProps,
+  FormRootProps,
+  FormRowProps,
+  FormSectionProps,
   FormSubmitProps,
+  FormViewportProps,
 };

package/src/components/Form/FormControls.tsx

@@ -19,7 +19,9 @@ import {
   useTranslation,
   withColumn,
 } from '@dxos/react-ui';
+import { MarkdownView } from '@dxos/react-ui-markdown';
 import { mx } from '@dxos/ui-theme';
+import { type Merge } from '@dxos/util';
 
 import { translationKey } from '#translations';
 
@@ -32,18 +34,16 @@ import {
   useFormHandler,
   useKeyHandler,
 } from '../../hooks';
-import {
-  FormFieldSet as NaturalFormFieldSet,
-  type FormFieldSetProps as NaturalFormFieldSetProps,
-} from './FormFieldSet';
-import { FormLayout as NaturalFormLayout, type FormLayoutProps as NaturalFormLayoutProps } from './FormLayout';
+import { formTheme } from './Form.theme';
+import { FormFieldSet, type FormFieldSetProps as NaturalFormFieldSetProps } from './FormFieldSet';
+import { FormLayout, type FormLayoutProps as NaturalFormLayoutProps } from './FormLayout';
 
 //
 // Root
 //
 
-export type FormRootProps<T extends AnyProperties = AnyProperties> = PropsWithChildren<
-  {
+export type FormRootProps<T extends AnyProperties = AnyProperties> = Merge<
+  PropsWithChildren<{
     /**
      * Called when the form is submitted and passes validation.
      */
@@ -53,11 +53,13 @@ export type FormRootProps<T extends AnyProperties = AnyProperties> = PropsWithCh
      * Called when the form is canceled to abandon/undo any pending changes.
      */
     onCancel?: () => void;
-  } & Omit<FormContextValue<T>, 'form'> &
-    Pick<FormHandlerProps<T>, 'schema' | 'autoSave' | 'values' | 'defaultValues' | 'onValidate' | 'onValuesChanged'> &
-    Omit<NaturalFormFieldSetProps<T>, 'schema' | 'path'>
+  }>,
+  Omit<FormContextValue<T>, 'form'>,
+  Pick<FormHandlerProps<T>, 'schema' | 'autoSave' | 'values' | 'defaultValues' | 'onValidate' | 'onValuesChanged'>,
+  Omit<NaturalFormFieldSetProps<T>, 'schema' | 'path'>
 >;
 
+// `variant` (from FormContextValue) flows through `...props` into the context for all parts to read.
 export const FormRoot = <T extends AnyProperties = AnyProperties>({
   children,
   schema,
@@ -83,19 +85,31 @@ FormRoot.displayName = 'Form.Root';
 
 const FORM_VIEWPORT_NAME = 'Form.Viewport';
 
-export type FormViewportProps = { scroll?: boolean; gutter?: ColumnRootProps['gutter'] };
+export type FormViewportProps = {
+  scroll?: boolean;
+  gutter?: ColumnRootProps['gutter'];
+};
 
 // The viewing window: owns the gutter Column (chrome/side-padding).
 // Content-height by default; `scroll` makes it fill its parent and scroll (the gutter then hosts the scrollbar).
 export const FormViewport = composable<HTMLDivElement, FormViewportProps>(
-  ({ children, scroll, gutter = 'xs', ...props }, forwardedRef) => {
+  ({ children, scroll, gutter = 'sm', ...props }, forwardedRef) => {
+    const { variant = 'default' } = useFormContext(FORM_VIEWPORT_NAME);
+    const styles = formTheme.styles({ variant });
     // Span the full width when nested inside another Column grid (e.g. Card.Root)
     // instead of landing in a single narrow track.
     const span = '[.dx-column-root_&]:col-span-full';
     if (scroll) {
       return (
         <Column.Root gutter={gutter} classNames={['dx-expander', span]}>
-          <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered padding thin ref={forwardedRef}>
+          <ScrollArea.Root
+            {...composableProps(props, { classNames: styles.viewport() })}
+            orientation='vertical'
+            centered
+            padding
+            thin
+            ref={forwardedRef}
+          >
             <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
           </ScrollArea.Root>
         </Column.Root>
@@ -103,7 +117,11 @@ export const FormViewport = composable<HTMLDivElement, FormViewportProps>(
     }
 
     return (
-      <Column.Root {...composableProps(props)} gutter={gutter} classNames={['w-full min-w-0', span]} ref={forwardedRef}>
+      <Column.Root
+        {...composableProps(props, { classNames: ['w-full min-w-0', span, styles.viewport()] })}
+        gutter={gutter}
+        ref={forwardedRef}
+      >
         {children}
       </Column.Root>
     );
@@ -122,7 +140,8 @@ export type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 // The viewed body: centered in the viewport's gutter. Pure body — the gutter Column is owned by `Form.Viewport`.
 export const FormContent = composable<HTMLDivElement, FormContentProps>(({ children, ...props }, forwardedRef) => {
-  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
+  const { form, testId, variant = 'default' } = useFormContext(FORM_CONTENT_NAME);
+  const styles = formTheme.styles({ variant });
   const localRef = useRef<HTMLDivElement>(null);
   const mergedRef = useMergeRefs([forwardedRef, localRef]);
   useKeyHandler(localRef, form);
@@ -131,7 +150,7 @@ export const FormContent = composable<HTMLDivElement, FormContentProps>(({ child
     <div
       {...composableProps(props, {
         role: 'form',
-        classNames: mx(withColumn.center(), 'flex flex-col w-full'),
+        classNames: mx(withColumn.center(), 'flex flex-col w-full dx-document', styles.content()),
       })}
       data-testid={testId}
       ref={mergedRef}
@@ -149,15 +168,23 @@ FormContent.displayName = FORM_CONTENT_NAME;
 
 const FORM_FIELDSET_NAME = 'Form.FieldSet';
 
-export type FormFieldSetProps = ThemedClassName<NaturalFormFieldSetProps<any>>;
-
-export const FormFieldSet = (props: FormFieldSetProps) => {
-  const { form, ...contextProps } = useFormContext(FORM_FIELDSET_NAME);
+export type FormFieldSetControllerProps = ThemedClassName<NaturalFormFieldSetProps<any>>;
 
-  return <NaturalFormFieldSet schema={form.schema} {...contextProps} {...props} />;
+/** Context-reading binding for `Form.FieldSet`: pulls the schema + field context off the form and delegates to {@link FormFieldSet}. */
+export const FormFieldSetController = ({ classNames, ...props }: FormFieldSetControllerProps) => {
+  const { form, variant = 'default', ...contextProps } = useFormContext(FORM_FIELDSET_NAME);
+  const styles = formTheme.styles({ variant });
+  return (
+    <FormFieldSet
+      schema={form.schema}
+      classNames={styles.fieldSet({ class: classNames })}
+      {...contextProps}
+      {...props}
+    />
+  );
 };
 
-FormFieldSet.displayName = FORM_FIELDSET_NAME;
+FormFieldSetController.displayName = FORM_FIELDSET_NAME;
 
 //
 // Layout
@@ -167,17 +194,18 @@ const FORM_LAYOUT_NAME = 'Form.Layout';
 
 export type FormLayoutProps = Omit<NaturalFormLayoutProps, 'schema'> & { schema?: NaturalFormLayoutProps['schema'] };
 
-export const FormLayout = ({ schema, ...props }: FormLayoutProps) => {
+/** Context-reading binding for `Form.Layout`: resolves the schema (prop or form) and delegates to {@link FormLayout}. */
+export const FormLayoutController = ({ schema, ...props }: FormLayoutProps) => {
   const { form, ...contextProps } = useFormContext(FORM_LAYOUT_NAME);
   const resolvedSchema = schema ?? form.schema;
   if (!resolvedSchema) {
     return null;
   }
 
-  return <NaturalFormLayout schema={resolvedSchema} {...contextProps} {...props} />;
+  return <FormLayout schema={resolvedSchema} {...contextProps} {...props} />;
 };
 
-FormLayout.displayName = FORM_LAYOUT_NAME;
+FormLayoutController.displayName = FORM_LAYOUT_NAME;
 
 //
 // Actions
@@ -203,9 +231,7 @@ export const FormActions = ({ classNames }: FormActionsProps) => {
   //   Deprecate FormSubmit ans use FormActions without Cancel button if no callback is supplied.
 
   return (
-    <div
-      className={mx(withColumn.center(), 'grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding', classNames)}
-    >
+    <div className={mx(withColumn.center(), formTheme.styles().actions(), classNames)}>
       {onCancel && (
         <IconButton
           icon='ph--x--regular'
@@ -239,17 +265,23 @@ FormActions.displayName = FORM_ACTIONS_NAME;
 
 const FORM_SECTION_NAME = 'Form.Section';
 
-export type FormSectionProps = ThemedClassName<{ label?: string; description?: string }>;
+export type FormSectionProps = ThemedClassName<{
+  title?: string;
+  description?: string;
+}>;
 
 export const FormSection = composable<HTMLDivElement, FormSectionProps>(
-  ({ children, label, description, ...props }, forwardedRef) => {
+  ({ children, title, description, ...props }, forwardedRef) => {
+    const { variant = 'default' } = useFormContext(FORM_SECTION_NAME);
+    const styles = formTheme.styles({ variant });
     return (
-      <div
-        {...composableProps(props, { classNames: 'flex flex-col pt-form-section-gap first:pt-0' })}
-        ref={forwardedRef}
-      >
-        {label && <h2 className='text-lg'>{label}</h2>}
-        {description && <p className='text-description'>{description}</p>}
+      <div {...composableProps(props, { classNames: styles.section() })} ref={forwardedRef}>
+        {(title || description) && (
+          <div className={styles.sectionHeader()}>
+            {title && <h2 className={styles.sectionTitle()}>{title}</h2>}
+            {description && <MarkdownView classNames={styles.sectionDescription()} content={description} />}
+          </div>
+        )}
         {children}
       </div>
     );
@@ -258,6 +290,31 @@ export const FormSection = composable<HTMLDivElement, FormSectionProps>(
 
 FormSection.displayName = FORM_SECTION_NAME;
 
+//
+// Group
+//
+
+const FORM_GROUP_NAME = 'Form.Group';
+
+export type FormGroupProps = ThemedClassName<PropsWithChildren>;
+
+/**
+ * A bordered card grouping related rows/controls (e.g. an entity card in a list).
+ * Layout-only and context-free — unlike `Form.FieldSet` it is not schema-driven.
+ */
+export const FormGroup = composable<HTMLDivElement, FormGroupProps>(({ children, ...props }, forwardedRef) => {
+  const { variant = 'default' } = useFormContext(FORM_SECTION_NAME);
+  const styles = formTheme.styles({ variant });
+
+  return (
+    <div {...composableProps(props, { classNames: styles.group() })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+FormGroup.displayName = FORM_GROUP_NAME;
+
 //
 // Submit
 //
@@ -279,7 +336,7 @@ export const FormSubmit = ({ classNames, label, icon, disabled }: FormSubmitProp
   }
 
   return (
-    <div className={mx('flex w-full pt-form-padding', classNames)}>
+    <div className={mx(formTheme.styles().submit(), classNames)}>
       <IconButton
         classNames='w-full'
         type='submit'

package/src/components/Form/FormField/FormField.tsx

@@ -11,28 +11,27 @@ import React, { useMemo } from 'react';
 
 import { Annotation, Format } from '@dxos/echo';
 import { SchemaEx } from '@dxos/effect';
-import { IconBlock, IconButton, IconButtonProps, useTranslation } from '@dxos/react-ui';
+import { IconButton, IconButtonProps, useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '#translations';
-import {
-  type CreateOptions,
-  type FormFieldOptions,
-  type FormFieldRenderer,
-  type FormFieldRendererProps,
-  type RefFieldDataProps,
-} from '#types';
+import { type FieldContext, type FormFieldRenderer, type FormFieldRendererProps } from '#types';
 
+import { AutofillAnnotation, OptionsLookupAnnotation } from '../../../annotations';
 import { useFormFieldState } from '../../../hooks';
 import { getRefProps } from '../../../util';
 import { FormFieldSet } from '../FormFieldSet';
 import {
   ArrayField,
+  AsyncSelectField,
+  AutofillField,
   BooleanField,
+  ComboboxField,
   DateField,
   GeoPointField,
   InlineRefField,
   MarkdownField,
   NumberField,
+  PasswordField,
   RefField,
   SelectField,
   TextAreaField,
@@ -55,20 +54,35 @@ export type FormFieldProps = {
    */
   name: string | null;
 
+  /**
+   * Explicit label, overriding the `title ?? capitalize(name)` derivation. Used by `ArrayField` to
+   * give scalar/ref items the array's resolved title (e.g. `Tags`) rather than re-capitalizing the
+   * raw array property name (e.g. `_tags`), since the element type carries no title of its own.
+   */
+  label?: string;
+
   /**
    * Path to the current object from the root. Used with nested forms.
    */
   path?: (string | number)[];
   autoFocus?: boolean;
-} & FormFieldOptions &
-  Pick<RefFieldDataProps, 'getOptions' | 'onCreate' | 'useType'> &
-  CreateOptions;
+  /** Whether the field is required (non-optional in the schema). Drives the label asterisk. */
+  required?: boolean;
+  /**
+   * Force a `Ref` field to render its target inline (a nested form) instead of the picker.
+   * Set by `ArrayField` for owned-ref arrays (`FormCreateAnnotation`); equivalent to
+   * `FormInlineAnnotation` but driven by the parent array rather than the element's own AST.
+   */
+  refInline?: boolean;
+} & FieldContext;
 
 export const FormField = (props: FormFieldProps) => {
   const {
     type,
     name,
+    label: labelProp,
     path,
+    required,
     projection,
     fieldMap,
     fieldProvider,
@@ -85,22 +99,27 @@ export const FormField = (props: FormFieldProps) => {
     useType,
     getOptions,
     onCreate,
+    resolveCreateEntry,
+    refInline,
   } = props;
   const { t } = useTranslation(translationKey);
   const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId)(type);
   const description = SchemaEx.getAnnotation<string>(SchemaAST.DescriptionAnnotationId)(type);
   const examples = SchemaEx.getAnnotation<string[]>(SchemaAST.ExamplesAnnotationId)(type);
 
-  // `name === null` means "no header" -- collapse to an empty string so
-  // downstream consumers keep their `label: string` types, and the falsy
-  // value lets `FormFieldSet`'s `label && <FormFieldLabel ...>` guard skip
-  // the header.
-  const label = useMemo(() => title ?? (name == null ? '' : String.capitalize(name)), [title, name]);
+  const label = useMemo(
+    () => labelProp ?? title ?? (name == null ? '' : String.capitalize(name)),
+    [labelProp, title, name],
+  );
   const placeholder = useMemo(
     () => (examples?.length ? `${t('example.placeholder')}: ${examples[0]}` : (description ?? label)),
-    [examples, description, label],
+    [examples, description, label, t],
   );
 
+  // Build the schema for `fieldProvider` only when one is registered, memoized by `type` (the AST) so
+  // we don't reconstruct it on every render.
+  const providerSchema = useMemo(() => (fieldProvider ? Schema.make(type) : undefined), [fieldProvider, type]);
+
   const fieldState = useFormFieldState(FormField.displayName, path);
   const jsonPath = SchemaEx.createJsonPath(path ?? []);
   const fieldProps: FormFieldRendererProps = {
@@ -108,16 +127,18 @@ export const FormField = (props: FormFieldProps) => {
     format: Format.FormatAnnotation.getFromAst(type).pipe((annotation) => Option.getOrUndefined(annotation)),
     readonly,
     label,
+    description,
     jsonPath,
     placeholder,
-    layout,
+    presentation: layout,
+    required,
     db,
     ...fieldState,
   };
 
   // Omit empty fields entirely in read-only mode -- an empty value has nothing
   // to display, so a labelled row with a blank input is just noise. This
-  // mirrors what `FormFieldWrapper` already does for `layout === 'static'`, but
+  // mirrors what `FormRow` already does for `presentation === 'static'`, but
   // covers every field type (including those that bypass the wrapper:
   // RefField, SelectField, MarkdownField, ...). Container fields
   // (`ArrayField`, nested-struct -> `FormFieldSet`) keep their own
@@ -136,10 +157,29 @@ export const FormField = (props: FormFieldProps) => {
     return <CustomField {...fieldProps} />;
   }
 
-  // TODO(burdon): Expensive to create schema each time; pass AST?
-  const component = fieldProvider?.({ schema: Schema.make(type), prop: name ?? '', fieldProps });
-  if (component) {
-    return component;
+  if (fieldProvider && providerSchema) {
+    const component = fieldProvider({ schema: providerSchema, prop: name ?? '', fieldProps });
+    if (component) {
+      return component;
+    }
+  }
+
+  //
+  // Dynamic, value-driven fields (options/value/validation loaded via a self-contained Effect annotation).
+  //
+
+  const optionsLookup = Option.getOrUndefined(OptionsLookupAnnotation.getFromAst(type));
+  if (optionsLookup) {
+    return optionsLookup.combobox ? (
+      <ComboboxField {...fieldProps} lookup={optionsLookup} />
+    ) : (
+      <AsyncSelectField {...fieldProps} lookup={optionsLookup} />
+    );
+  }
+
+  const autofill = Option.getOrUndefined(AutofillAnnotation.getFromAst(type));
+  if (autofill) {
+    return <AutofillField {...fieldProps} autofill={autofill} />;
   }
 
   //
@@ -190,10 +230,21 @@ export const FormField = (props: FormFieldProps) => {
 
   const refProps = getRefProps(type);
   if (refProps) {
-    // Inline a single referenced object's own fields (nested form) instead of a picker.
-    const inline = Annotation.FormInlineAnnotation.getFromAst(refProps.ast).pipe(Option.getOrElse(() => false));
+    // Inline a single referenced object's own fields (nested form) instead of a picker. `refInline` lets a
+    // parent (e.g. an owned-ref `ArrayField`) force this for elements whose own AST carries no annotation.
+    const inline =
+      refInline || Annotation.FormInlineAnnotation.getFromAst(refProps.ast).pipe(Option.getOrElse(() => false));
     if (inline && !refProps.isArray) {
-      return <InlineRefField {...fieldProps} {...refProps} db={db} useType={useType} onCreate={onCreate} />;
+      return (
+        <InlineRefField
+          {...fieldProps}
+          {...refProps}
+          db={db}
+          useType={useType}
+          onCreate={onCreate}
+          resolveCreateEntry={resolveCreateEntry}
+        />
+      );
     }
 
     const isCreateTarget = !createTypename || refProps.typename === createTypename;
@@ -209,6 +260,7 @@ export const FormField = (props: FormFieldProps) => {
         useType={useType}
         getOptions={getOptions}
         onCreate={onCreate}
+        resolveCreateEntry={resolveCreateEntry}
       />
     );
   }
@@ -243,6 +295,7 @@ export const FormField = (props: FormFieldProps) => {
           useType={useType}
           getOptions={getOptions}
           onCreate={onCreate}
+          resolveCreateEntry={resolveCreateEntry}
         />
       );
     }
@@ -258,12 +311,7 @@ FormField.displayName = 'Form.FormField';
 //
 
 export const CompactIconButton = (props: IconButtonProps) => {
-  return (
-    // IconBlock defaults to aria-hidden (decorative slot); the button is interactive, so un-hide it.
-    <IconBlock aria-hidden={false} classNames='my-[1px]'>
-      <IconButton variant='ghost' density='xs' square iconOnly {...props} />
-    </IconBlock>
-  );
+  return <IconButton variant='ghost' iconOnly {...props} />;
 };
 
 /**
@@ -288,6 +336,7 @@ const getFormField = ({
     Match.when(Format.TypeFormat.DateTime, () => DateField),
     Match.when(Format.TypeFormat.GeoPoint, () => GeoPointField),
     Match.when(Format.TypeFormat.Markdown, () => MarkdownField),
+    Match.when(Format.TypeFormat.Password, () => PasswordField),
     Match.when(Format.TypeFormat.Text, () => TextAreaField),
     Match.when(Format.TypeFormat.Time, () => DateField),
     Match.orElse(() => undefined),
@@ -310,6 +359,8 @@ const getFormField = ({
     case 'BooleanKeyword':
       return BooleanField;
   }
+
+  return undefined;
 };
 
 const getSelectOptions = (ast: SchemaAST.AST): Format.Options[] | undefined => {