@dxos/react-ui-form 0.10.0 → 0.11.1

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

@@ -23,6 +23,7 @@ import { useFormValues } from '../../../../../hooks';
 import { getFormProperties } from '../../../../../util';
 import { CompactIconButton, FormField, type FormFieldProps } from '../../FormField';
 import { FormFieldHeader } from '../../FormFieldHeader';
+import { getDefaultValue } from './default-value';
 
 // Synthetic id assigned to each row when rendering an ordered list. Plain form
 // values have no stable identity, so drag-and-drop (which requires a stable key
@@ -185,13 +186,7 @@ export const ArrayField = ({
     // TODO(burdon): Hacky.
     // An owned inline object form must establish its own column context: otherwise it inherits the parent
     // form's `--dx-col` (center) placement and collapses into the array row's narrow second track.
-    return createInline ? (
-      <div role='none' className='w-full min-w-0 [--dx-col:auto]'>
-        {field}
-      </div>
-    ) : (
-      field
-    );
+    return createInline ? <div className='w-full min-w-0 [--dx-col:auto]'>{field}</div> : field;
   };
 
   const header = (layout !== 'static' || (values && values.length > 0)) && (
@@ -260,7 +255,7 @@ export const ArrayField = ({
   return (
     <>
       {header}
-      <div className='flex flex-col gap-2'>
+      <div className='flex flex-col gap-2 pb-2'>
         {values?.map((_, index) => {
           const isLast = index === values.length - 1;
           return (
@@ -288,41 +283,3 @@ export const ArrayField = ({
 };
 
 ArrayField.displayName = 'Form.ArrayField';
-
-/**
- * Returns the default empty value for a given AST.
- * Used for initializing new array values etc.
- */
-// TODO(wittjosiah): Factor out?
-export const getDefaultValue = (ast?: SchemaAST.AST): any => {
-  switch (ast?._tag) {
-    case 'StringKeyword': {
-      return '';
-    }
-    case 'NumberKeyword': {
-      return 0;
-    }
-    case 'BooleanKeyword': {
-      return false;
-    }
-    case 'Suspend': {
-      return getDefaultValue(ast.f());
-    }
-    case 'Refinement': {
-      // Use minimum from JSON schema annotation (e.g. Schema.between(1, 31)) as the default
-      // so new array items start within the valid range.
-      const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(ast));
-      if (jsonSchema != null && 'minimum' in jsonSchema && typeof jsonSchema.minimum === 'number') {
-        return jsonSchema.minimum;
-      }
-      return getDefaultValue(ast.from);
-    }
-    default: {
-      if (ast && SchemaEx.isNestedType(ast)) {
-        return {};
-      } else {
-        throw new Error(`Unsupported type: ${ast?._tag}`);
-      }
-    }
-  }
-};

package/src/components/Form/FormField/fields/ArrayField/default-value.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { SchemaEx } from '@dxos/effect';
+
+// Kept out of `ArrayField.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+/**
+ * Returns the default empty value for a given AST.
+ * Used for initializing new array values etc.
+ */
+// TODO(wittjosiah): Factor out?
+export const getDefaultValue = (ast?: SchemaAST.AST): any => {
+  switch (ast?._tag) {
+    case 'StringKeyword': {
+      return '';
+    }
+    case 'NumberKeyword': {
+      return 0;
+    }
+    case 'BooleanKeyword': {
+      return false;
+    }
+    case 'Suspend': {
+      return getDefaultValue(ast.f());
+    }
+    case 'Refinement': {
+      // Use minimum from JSON schema annotation (e.g. Schema.between(1, 31)) as the default
+      // so new array items start within the valid range.
+      const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(ast));
+      if (jsonSchema != null && 'minimum' in jsonSchema && typeof jsonSchema.minimum === 'number') {
+        return jsonSchema.minimum;
+      }
+      return getDefaultValue(ast.from);
+    }
+    default: {
+      if (ast && SchemaEx.isNestedType(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
+    }
+  }
+};

package/src/components/Form/FormField/fields/ArrayField/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './default-value';
+
 export * from './ArrayField';

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

@@ -29,6 +29,9 @@ export const ComboboxField = ({ lookup, type, readonly, placeholder, onValueChan
   const values = useFormValues<AnyProperties>(ComboboxField.displayName);
   const ownKey = props.jsonPath;
   const [query, setQuery] = useState('');
+  // The stored value is often an opaque id; remember the selected option's label so the trigger shows
+  // it (the query-driven suggestions no longer include the option once selected).
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>();
 
   // When the combobox searches on its own field (its name is among `deps`), feed the live query to the
   // loader so remote suggestions track typing; otherwise the loader reads the committed sibling values.
@@ -54,7 +57,13 @@ export const ComboboxField = ({ lookup, type, readonly, placeholder, onValueChan
   );
   const hasExact = results.some((option) => option.value === trimmed);
 
-  const handleValueChange = useCallback((next: string) => onValueChange(type, next), [onValueChange, type]);
+  const handleValueChange = useCallback(
+    (next: string) => {
+      setSelectedLabel((data ?? []).find((option) => option.value === next)?.label);
+      onValueChange(type, next);
+    },
+    [onValueChange, type, data],
+  );
   const handleOpenChange = useCallback((open: boolean) => {
     if (!open) {
       setQuery('');
@@ -64,12 +73,13 @@ export const ComboboxField = ({ lookup, type, readonly, placeholder, onValueChan
   return (
     <FormRow<string>
       readonly={readonly}
-      renderStatic={(value) => <p className='truncate min-w-0'>{value ?? ''}</p>}
+      renderStatic={(value) => <p className='truncate min-w-0'>{selectedLabel ?? value ?? ''}</p>}
       {...props}
     >
       {({ value = '' }) => (
         <Combobox.Root
           value={value}
+          displayValue={selectedLabel}
           onValueChange={handleValueChange}
           onOpenChange={handleOpenChange}
           placeholder={placeholder}

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

@@ -71,7 +71,7 @@ export const DateField = ({
         switch (format) {
           case Format.TypeFormat.Date:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch tabular-nums'>
                 <Input.Date
                   classNames='min-w-0 overflow-hidden'
                   disabled={readonly}
@@ -82,11 +82,18 @@ export const DateField = ({
               </div>
             );
           case Format.TypeFormat.Time:
-            return <Input.Time disabled={!!readonly} value={value ?? ''} onValueChange={handleSimpleChange} />;
+            return (
+              <Input.Time
+                classNames='tabular-nums'
+                disabled={!!readonly}
+                value={value ?? ''}
+                onValueChange={handleSimpleChange}
+              />
+            );
           case Format.TypeFormat.DateTime:
           default:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch tabular-nums'>
                 <Input.DateTime
                   classNames='min-w-0 overflow-hidden'
                   disabled={readonly}

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

@@ -8,7 +8,7 @@ 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 { useQuery } from '@dxos/echo-react';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Panel } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';

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

@@ -17,16 +17,6 @@ import { type FormFieldRendererProps } from '#types';
 
 import { FormRow } from '../../FormRow';
 
-// Mirror the focus treatment of `Input` (default variant): a `focus-ring-subtle` ring of `dx-focus-line`
-// width rather than a recolored 1px border, and suppress the editor wrapper's `accent-bg` border so a
-// second click never turns the outline blue. Keyed on `focus-within` because focus lands on the inner
-// CodeMirror contenteditable, not this wrapper.
-const editorClassNames = [
-  'min-h-[6lh] transition-colors rounded-xs p-1 px-2 bg-input-surface border border-input-separator',
-  'focus:border-separator focus-within:border-separator focus-within:bg-focus-surface',
-  'focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-focus-ring-subtle focus-within:z-[1]',
-];
-
 /**
  * Form field that edits a markdown value in a CodeMirror editor.
  * Supports two backings:
@@ -116,7 +106,7 @@ const RefMarkdownEditor = ({ reference, placeholder, readonly }: RefMarkdownEdit
 
   return (
     <Editor.Root>
-      <Editor.View classNames={editorClassNames} extensions={extensions} />
+      <Editor.View classNames='dx-input' extensions={extensions} />
     </Editor.Root>
   );
 };
@@ -135,7 +125,7 @@ const StringMarkdownEditor = ({ value, placeholder, readonly, onChange }: String
   return (
     <Editor.Root>
       <Editor.View
-        classNames={editorClassNames}
+        classNames='dx-input min-h-[6lh]'
         extensions={extensions}
         value={value}
         onChange={readonly ? undefined : handleChange}

package/src/components/Form/FormField/fields/NumberField/NumberField.test.ts

@@ -5,7 +5,7 @@
 import * as Schema from 'effect/Schema';
 import { describe, test } from 'vitest';
 
-import { getNumericConstraints } from './NumberField';
+import { getNumericConstraints } from './numeric-constraints';
 
 describe('getNumericConstraints', () => {
   test('reads min/max from Schema.between (bounds live on separate nested refinements)', ({ expect }) => {

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

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
-import * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Input, type TextInputProps } from '@dxos/react-ui';
@@ -12,40 +10,7 @@ import { safeParseFloat } from '@dxos/util';
 import { type FormFieldRendererProps } from '#types';
 
 import { FormRow } from '../../FormRow';
-
-/**
- * Extracts numeric constraints (`minimum`/`maximum` bounds and whether the value must be an integer)
- * by walking the chain of Refinement ASTs and reading each one's JSON schema annotation (e.g. produced
- * by `Schema.between` / `Schema.int`). Returns empty constraints when none are declared.
- */
-export const getNumericConstraints = (ast: SchemaAST.AST): { min?: number; max?: number; integer: boolean } => {
-  let node: SchemaAST.AST | undefined = ast;
-  let min: number | undefined;
-  let max: number | undefined;
-  let integer = false;
-  // Nested refinements (e.g. `Schema.int()` + `Schema.between()`) each carry their own JSON schema
-  // fragment, so accumulate across the chain rather than reading only the outermost node.
-  while (node && SchemaAST.isRefinement(node)) {
-    const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(node));
-    if (jsonSchema != null) {
-      // Stacked refinements intersect: keep the strictest bound (largest min, smallest max).
-      if ('minimum' in jsonSchema && typeof jsonSchema.minimum === 'number') {
-        min = min === undefined ? jsonSchema.minimum : Math.max(min, jsonSchema.minimum);
-      }
-      if ('maximum' in jsonSchema && typeof jsonSchema.maximum === 'number') {
-        max = max === undefined ? jsonSchema.maximum : Math.min(max, jsonSchema.maximum);
-      }
-      if (
-        ('type' in jsonSchema && jsonSchema.type === 'integer') ||
-        ('multipleOf' in jsonSchema && jsonSchema.multipleOf === 1)
-      ) {
-        integer = true;
-      }
-    }
-    node = node.from;
-  }
-  return { min, max, integer };
-};
+import { getNumericConstraints } from './numeric-constraints';
 
 export const NumberField = ({
   type,

package/src/components/Form/FormField/fields/NumberField/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './numeric-constraints';
+
 export * from './NumberField';

package/src/components/Form/FormField/fields/NumberField/numeric-constraints.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+
+// Kept out of `NumberField.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+/**
+ * Extracts numeric constraints (`minimum`/`maximum` bounds and whether the value must be an integer)
+ * by walking the chain of Refinement ASTs and reading each one's JSON schema annotation (e.g. produced
+ * by `Schema.between` / `Schema.int`). Returns empty constraints when none are declared.
+ */
+export const getNumericConstraints = (ast: SchemaAST.AST): { min?: number; max?: number; integer: boolean } => {
+  let node: SchemaAST.AST | undefined = ast;
+  let min: number | undefined;
+  let max: number | undefined;
+  let integer = false;
+  // Nested refinements (e.g. `Schema.int()` + `Schema.between()`) each carry their own JSON schema
+  // fragment, so accumulate across the chain rather than reading only the outermost node.
+  while (node && SchemaAST.isRefinement(node)) {
+    const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(node));
+    if (jsonSchema != null) {
+      // Stacked refinements intersect: keep the strictest bound (largest min, smallest max).
+      if ('minimum' in jsonSchema && typeof jsonSchema.minimum === 'number') {
+        min = min === undefined ? jsonSchema.minimum : Math.max(min, jsonSchema.minimum);
+      }
+      if ('maximum' in jsonSchema && typeof jsonSchema.maximum === 'number') {
+        max = max === undefined ? jsonSchema.maximum : Math.min(max, jsonSchema.maximum);
+      }
+      if (
+        ('type' in jsonSchema && jsonSchema.type === 'integer') ||
+        ('multipleOf' in jsonSchema && jsonSchema.multipleOf === 1)
+      ) {
+        integer = true;
+      }
+    }
+    node = node.from;
+  }
+  return { min, max, integer };
+};

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

@@ -29,6 +29,7 @@ export const PasswordField = ({
         <Input.TextInput
           type='password'
           noAutoFill
+          spellCheck={false}
           disabled={!!readonly}
           placeholder={placeholder}
           value={value}

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

@@ -15,7 +15,7 @@ import { IconButton, Input, useTranslation } from '@dxos/react-ui';
 import { translationKey } from '#translations';
 
 import { omitId } from '../../../../../util';
-import { FormContent, FormFieldSetController, FormRoot } from '../../../FormControls';
+import { FormContent, FormFieldSetContainer, FormRoot } from '../../../FormControls';
 import { FormFieldLabel } from '../../FormRow';
 import { presentationFor } from '../../presentation';
 import { type RefFieldProps } from './RefField';
@@ -138,7 +138,7 @@ const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: Inlin
   return (
     <FormRoot db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
       <FormContent>
-        <FormFieldSetController collapsible readonly={readonly} />
+        <FormFieldSetContainer collapsible readonly={readonly} />
       </FormContent>
     </FormRoot>
   );

package/src/components/Form/FormField/fields/RefField/RefField.test.ts

@@ -6,7 +6,7 @@ import { describe, test } from 'vitest';
 
 import { type RefOption } from '#types';
 
-import { findRefOption } from './RefField';
+import { findRefOption } from './find-ref-option';
 
 // Sample qualified self URIs as produced by an in-space object (Entity.getURI / `echo://<space>/<id>`).
 const SPACE_ID = 'BA25QRC2FEWCSAMRP4RZL65LWJ7352CKE';

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

@@ -9,63 +9,21 @@ import { Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
 import { useType as defaultUseType, useQuery } from '@dxos/echo-react';
 import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { SchemaEx } from '@dxos/effect';
-import { DXN, EID, URI } from '@dxos/keys';
+import { DXN, URI } 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 { translationKey } from '#translations';
-import { type CreateOptions, type FormFieldRendererProps, type RefFieldDataProps, type RefOption } from '#types';
+import { type CreateOptions, type FormFieldRendererProps, type RefFieldDataProps } from '#types';
 
 import { omitHiddenFormFields, omitId } from '../../../../../util';
 import { ObjectPicker } from '../../../../ObjectPicker';
 import { FormFieldLabel } from '../../FormRow';
 import { presentationFor } from '../../presentation';
+import { findRefOption } from './find-ref-option';
 
 // TODO(burdon): Factor out.
-const isRefSnapshot = (val: any): val is { '/': string } => {
-  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
-};
-
-/**
- * Find the option a ref-like form value points at. Matches on the local (entity-id) form so a bare local EID
- * (`echo:/<id>`, produced by `Ref.make`) still resolves against an option keyed by the entity's qualified
- * self URI (`echo://<space>/<id>`). Returns `undefined` when the value is not a ref or no option matches.
- *
- * Comparing by entity id is only sound within one space (ids are unique there, not globally). Two EIDs that
- * both carry a space authority must therefore agree on it: a qualified value and a qualified option from
- * different spaces never match, even when their entity ids coincide.
- */
-export const findRefOption = (value: unknown, options: RefOption[]): RefOption | undefined => {
-  const isRef = Ref.isRef(value);
-  if (!isRef && !isRefSnapshot(value)) {
-    return undefined;
-  }
-  const valueUri = isRef ? value.uri : value['/'];
-  // Keyed/registry entities (skills, operations) are referenced by a named DXN rather than an
-  // entity-id, so they carry no parseable EID; match those by direct URI equality against the option id.
-  const directMatch = options.find((option) => option.id === valueUri);
-  if (directMatch) {
-    return directMatch;
-  }
-  const valueEid = EID.tryParse(valueUri);
-  if (!valueEid) {
-    return undefined;
-  }
-  const valueSpaceId = EID.getSpaceId(valueEid);
-  const valueLocal = EID.toLocal(valueEid);
-  return options.find((option) => {
-    const optionEid = EID.tryParse(option.id);
-    if (!optionEid) {
-      return false;
-    }
-    const optionSpaceId = EID.getSpaceId(optionEid);
-    if (valueSpaceId != null && optionSpaceId != null && valueSpaceId !== optionSpaceId) {
-      return false;
-    }
-    return EID.equals(EID.toLocal(optionEid), valueLocal);
-  });
-};
 
 const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (
   results,

package/src/components/Form/FormField/fields/RefField/find-ref-option.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos/lit-ui/dx-tag-picker.pcss';
+import { Ref } from '@dxos/echo';
+import { EID } from '@dxos/keys';
+
+import { type RefOption } from '#types';
+
+// Kept out of `RefField.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+const isRefSnapshot = (val: any): val is { '/': string } => {
+  return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
+};
+
+/**
+ * Find the option a ref-like form value points at. Matches on the local (entity-id) form so a bare local EID
+ * (`echo:/<id>`, produced by `Ref.make`) still resolves against an option keyed by the entity's qualified
+ * self URI (`echo://<space>/<id>`). Returns `undefined` when the value is not a ref or no option matches.
+ *
+ * Comparing by entity id is only sound within one space (ids are unique there, not globally). Two EIDs that
+ * both carry a space authority must therefore agree on it: a qualified value and a qualified option from
+ * different spaces never match, even when their entity ids coincide.
+ */
+export const findRefOption = (value: unknown, options: RefOption[]): RefOption | undefined => {
+  const isRef = Ref.isRef(value);
+  if (!isRef && !isRefSnapshot(value)) {
+    return undefined;
+  }
+  const valueUri = isRef ? value.uri : value['/'];
+  // Keyed/registry entities (skills, operations) are referenced by a named DXN rather than an
+  // entity-id, so they carry no parseable EID; match those by direct URI equality against the option id.
+  const directMatch = options.find((option) => option.id === valueUri);
+  if (directMatch) {
+    return directMatch;
+  }
+  const valueEid = EID.tryParse(valueUri);
+  if (!valueEid) {
+    return undefined;
+  }
+  const valueSpaceId = EID.getSpaceId(valueEid);
+  const valueLocal = EID.toLocal(valueEid);
+  return options.find((option) => {
+    const optionEid = EID.tryParse(option.id);
+    if (!optionEid) {
+      return false;
+    }
+    const optionSpaceId = EID.getSpaceId(optionEid);
+    if (valueSpaceId != null && optionSpaceId != null && valueSpaceId !== optionSpaceId) {
+      return false;
+    }
+    return EID.equals(EID.toLocal(optionEid), valueLocal);
+  });
+};

package/src/components/Form/FormField/fields/RefField/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './find-ref-option';
+
 export * from './RefField';
 export * from './InlineRefField';

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

@@ -4,11 +4,10 @@
 
 import React, { useCallback } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { Icon, Select, type SelectRootProps } from '@dxos/react-ui';
 import { getStyles } from '@dxos/ui-theme';
 
-import { type FormFieldRenderer, type FormFieldRendererProps } from '#types';
+import { type FormFieldRendererProps } from '#types';
 
 import { FormRow } from '../../FormRow';
 
@@ -33,7 +32,7 @@ export const SelectField = ({ type, readonly, placeholder, options, onValueChang
       {...props}
     >
       {({ value }) => (
-        <Select.Root value={value} onValueChange={handleValueChange}>
+        <Select.Root value={value} onValueChange={handleValueChange} disabled={!!readonly}>
           <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
           {options?.length !== 0 && (
             <Select.Portal>
@@ -70,67 +69,3 @@ export type SelectFieldOption = {
   value: string;
   label?: string;
 };
-
-export type CreateSelectFieldOptions = {
-  /** Options to display. Strings are used as both value and label. */
-  options: ReadonlyArray<string | SelectFieldOption>;
-  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
-  defaultLabel?: string | null;
-};
-
-/**
- * Factory for a `fieldMap` entry (keyed by JSON path) that renders a Select over a fixed list of
- * options, with an optional sentinel mapping to `undefined`. Use for fields whose choices come from a
- * runtime list rather than the schema (e.g. available model ids).
- */
-export const createSelectField = ({
-  options,
-  defaultLabel = 'Default',
-}: CreateSelectFieldOptions): FormFieldRenderer => {
-  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
-  const hasDefault = defaultLabel !== null;
-  // The sentinel maps to `undefined`. Radix forbids an empty-string `Select.Item` value, so use a
-  // non-empty placeholder; reserved (a real option with this value would be unrepresentable).
-  const sentinel = '__default__';
-  invariant(
-    !normalized.some((option) => option.value === sentinel),
-    `createSelectField: option value '${sentinel}' is reserved.`,
-  );
-
-  return ({ type, readonly, onValueChange, ...props }: FormFieldRendererProps<string | undefined>) => (
-    <FormRow<string>
-      readonly={readonly}
-      renderStatic={(value) => (
-        <p className='truncate min-w-0'>
-          {normalized.find((option) => option.value === value)?.label ?? String(value ?? '')}
-        </p>
-      )}
-      {...props}
-    >
-      {({ value }) => (
-        <Select.Root
-          disabled={!!readonly}
-          value={value ?? sentinel}
-          onValueChange={(next) => onValueChange(type, hasDefault && next === sentinel ? undefined : next)}
-        >
-          <Select.TriggerButton classNames='w-full' disabled={!!readonly} />
-          {normalized.length > 0 && (
-            <Select.Portal>
-              <Select.Content>
-                <Select.Viewport>
-                  {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
-                  {normalized.map((option) => (
-                    <Select.Option key={option.value} value={option.value}>
-                      {option.label ?? option.value}
-                    </Select.Option>
-                  ))}
-                </Select.Viewport>
-                <Select.Arrow />
-              </Select.Content>
-            </Select.Portal>
-          )}
-        </Select.Root>
-      )}
-    </FormRow>
-  );
-};