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

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

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { type AnyProperties } from '@dxos/echo/internal';
+
+import { type FormFieldRendererProps } from '#types';
+
+import { type OptionsLookup, type OptionsLookupEntry } from '../../../../../annotations';
+import { pickValues, useAsyncFieldEffect, useFormValues } from '../../../../../hooks';
+import { SelectField } from '../SelectField';
+
+export type AsyncSelectFieldProps = FormFieldRendererProps<string> & {
+  /** Loads the selectable options from the lookup's declared dependency fields. */
+  lookup: OptionsLookup;
+};
+
+/**
+ * A select whose options are loaded dynamically (debounced) from the fields the lookup declares in its
+ * `deps`, via an {@link Annotation.OptionsLookup}. Re-runs only when one of those values changes.
+ * Auto-selects the sole option when exactly one resolves and nothing is chosen yet.
+ */
+export const AsyncSelectField = ({ lookup, ...fieldProps }: AsyncSelectFieldProps) => {
+  const values = useFormValues<AnyProperties>(AsyncSelectField.displayName);
+  const subset = useMemo(() => pickValues(values, lookup.deps), [values, lookup.deps]);
+  const key = useMemo(() => JSON.stringify(subset), [subset]);
+  const { loading, data } = useAsyncFieldEffect<readonly OptionsLookupEntry[]>(() => lookup.load(subset), key);
+  const options = data ?? [];
+
+  const { type, placeholder } = fieldProps;
+  const current = fieldProps.getValue();
+  // `onValueChange` changes identity on every edit; hold it in a ref so auto-select depends only on the
+  // resolved `data` and current value (avoids an effect-refire loop).
+  const onValueChangeRef = useRef(fieldProps.onValueChange);
+  onValueChangeRef.current = fieldProps.onValueChange;
+  // Track which `data` reference has already been auto-selected so clearing the field does not trigger
+  // repeated re-selection of the same single option.
+  const autoSelectedDataRef = useRef<typeof data>(undefined);
+  useEffect(() => {
+    if ((current == null || current === '') && data?.length === 1 && data !== autoSelectedDataRef.current) {
+      autoSelectedDataRef.current = data;
+      onValueChangeRef.current(type, data[0].value);
+    }
+  }, [current, data, type]);
+
+  const resolvedPlaceholder = loading ? 'Loading…' : options.length === 0 ? 'No options available' : placeholder;
+
+  return (
+    <SelectField
+      {...fieldProps}
+      placeholder={resolvedPlaceholder}
+      options={options.map(({ value, label, secondaryLabel, icon }) => ({ value, label, secondaryLabel, icon }))}
+    />
+  );
+};
+
+AsyncSelectField.displayName = 'Form.AsyncSelectField';

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

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

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

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { type AnyProperties } from '@dxos/echo/internal';
+
+import { type FormFieldRendererProps } from '#types';
+
+import { type Autofill } from '../../../../../annotations';
+import { pickValues, useAsyncFieldEffect, useFormValues } from '../../../../../hooks';
+import { TextField } from '../TextField';
+
+export type AutofillFieldProps = FormFieldRendererProps<string> & {
+  /** Derives this field's value from the autofill's declared dependency fields (e.g. a sibling URL). */
+  autofill: Autofill;
+};
+
+/**
+ * An editable text field that pre-fills its value (debounced) from the fields the autofill declares in
+ * its `deps`, via an {@link Autofill}. Re-runs only when one of those values changes. The
+ * derived value is written only while the user has not typed their own (the field is empty or still
+ * holds the last auto-filled value), so a manual edit is never clobbered.
+ */
+export const AutofillField = ({ autofill, ...fieldProps }: AutofillFieldProps) => {
+  const values = useFormValues<AnyProperties>(AutofillField.displayName);
+  const subset = useMemo(() => pickValues(values, autofill.deps), [values, autofill.deps]);
+  const key = useMemo(() => JSON.stringify(subset), [subset]);
+  const { data } = useAsyncFieldEffect<string | undefined>(() => autofill.derive(subset), key);
+
+  // Read field state through refs so the write effect depends only on the derived `data` — `getValue`
+  // and `onValueChange` change identity on every value edit, and depending on them would re-fire the
+  // effect after it writes, re-applying the same value in an infinite loop.
+  const { type } = fieldProps;
+  const getValueRef = useRef(fieldProps.getValue);
+  getValueRef.current = fieldProps.getValue;
+  const onValueChangeRef = useRef(fieldProps.onValueChange);
+  onValueChangeRef.current = fieldProps.onValueChange;
+  const lastFilledRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    const current = getValueRef.current();
+    if (typeof data !== 'string' || data.length === 0) {
+      // Derivation stopped returning a value — clear the field if it still holds our last fill so stale
+      // auto-filled text doesn't persist after the source field is cleared.
+      if (lastFilledRef.current != null && current === lastFilledRef.current) {
+        lastFilledRef.current = undefined;
+        onValueChangeRef.current(type, '');
+      }
+      return;
+    }
+    if (current === data) {
+      lastFilledRef.current = data;
+      return;
+    }
+    // Only fill while the user has not typed their own value (empty, or still our last fill).
+    if (current == null || current === '' || current === lastFilledRef.current) {
+      lastFilledRef.current = data;
+      onValueChangeRef.current(type, data);
+    }
+  }, [data, type]);
+
+  return <TextField {...fieldProps} />;
+};
+
+AutofillField.displayName = 'Form.AutofillField';

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

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

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

@@ -8,7 +8,7 @@ import { Input, type SwitchProps } from '@dxos/react-ui';
 
 import { type FormFieldRendererProps } from '#types';
 
-import { FormFieldWrapper } from '../../FormFieldWrapper';
+import { FormRow } from '../../FormRow';
 
 export const BooleanField = ({ type, readonly, onValueChange, ...props }: FormFieldRendererProps<boolean>) => {
   const handleChange = useCallback<NonNullable<SwitchProps['onCheckedChange']>>(
@@ -17,13 +17,12 @@ export const BooleanField = ({ type, readonly, onValueChange, ...props }: FormFi
   );
 
   return (
-    <FormFieldWrapper<boolean> readonly={readonly} {...props}>
+    <FormRow<boolean> readonly={readonly} {...props}>
       {({ value }) => (
-        // TODO(burdon) Push down to react-ui components (e.g., Input.Root).
-        <div className='flex items-center px-0.5 h-8'>
+        <Input.Block>
           <Input.Switch disabled={!!readonly} checked={value} onCheckedChange={handleChange} />
-        </div>
+        </Input.Block>
       )}
-    </FormFieldWrapper>
+    </FormRow>
   );
 };

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

@@ -0,0 +1,104 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { type AnyProperties } from '@dxos/echo/internal';
+import { Combobox } from '@dxos/react-ui-list';
+
+import { type FormFieldRendererProps } from '#types';
+
+import { type OptionsLookup, type OptionsLookupEntry } from '../../../../../annotations';
+import { pickValues, useAsyncFieldEffect, useFormValues } from '../../../../../hooks';
+import { FormRow } from '../../FormRow';
+
+export type ComboboxFieldProps = FormFieldRendererProps<string> & {
+  /** Loads suggestions from the lookup's declared dependency fields (typically the field's own value). */
+  lookup: OptionsLookup;
+};
+
+/**
+ * An editable combobox built on the shared {@link Combobox} primitive (trigger + popover search list,
+ * the same family as `ObjectPicker`/`SearchList`). The trigger shows the current value; opening it reveals
+ * a search input that loads suggestions (debounced) via an {@link OptionsLookup} and filters
+ * them as you type. The literal typed text is offered as a fallback option at the bottom (deduped), so a
+ * value not among the suggestions can still be selected. No options are shown until something is typed.
+ */
+export const ComboboxField = ({ lookup, type, readonly, placeholder, onValueChange, ...props }: ComboboxFieldProps) => {
+  const values = useFormValues<AnyProperties>(ComboboxField.displayName);
+  const ownKey = props.jsonPath;
+  const [query, setQuery] = useState('');
+
+  // 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.
+  const lookupValues = useMemo(() => {
+    const subset = pickValues(values, lookup.deps);
+    if (ownKey && lookup.deps.includes(ownKey)) {
+      subset[ownKey] = query;
+    }
+    return subset;
+  }, [values, lookup.deps, ownKey, query]);
+  const key = useMemo(() => JSON.stringify(lookupValues), [lookupValues]);
+  const { data } = useAsyncFieldEffect<readonly OptionsLookupEntry[]>(() => lookup.load(lookupValues), key);
+
+  const trimmed = query.trim();
+  const normalized = trimmed.toLowerCase();
+  // No options until something is typed; then filter the loaded suggestions by the input text.
+  const results = useMemo(
+    () =>
+      normalized.length === 0
+        ? []
+        : (data ?? []).filter((option) => (option.label ?? option.value).toLowerCase().includes(normalized)),
+    [data, normalized],
+  );
+  const hasExact = results.some((option) => option.value === trimmed);
+
+  const handleValueChange = useCallback((next: string) => onValueChange(type, next), [onValueChange, type]);
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setQuery('');
+    }
+  }, []);
+
+  return (
+    <FormRow<string>
+      readonly={readonly}
+      renderStatic={(value) => <p className='truncate min-w-0'>{value ?? ''}</p>}
+      {...props}
+    >
+      {({ value = '' }) => (
+        <Combobox.Root
+          value={value}
+          onValueChange={handleValueChange}
+          onOpenChange={handleOpenChange}
+          placeholder={placeholder}
+        >
+          {/* Full-width trigger (default renders value/placeholder + caret) to match the other fields. */}
+          <Combobox.Trigger disabled={!!readonly} classNames='w-full' />
+          <Combobox.Portal>
+            {/* Keep the first result highlighted as the list changes while typing. */}
+            <Combobox.Content resetSelectionOnChange>
+              <Combobox.Input autoFocus value={query} onValueChange={setQuery} placeholder={placeholder} />
+              <Combobox.List>
+                {results.map((option) => (
+                  <Combobox.Item
+                    key={option.value}
+                    value={option.value}
+                    label={option.label ?? option.value}
+                    suffix={option.secondaryLabel}
+                  />
+                ))}
+                {/* The literal typed text as a fallback option at the bottom, unless a suggestion already is it. */}
+                {normalized.length > 0 && !hasExact && <Combobox.Item value={trimmed} label={trimmed} />}
+              </Combobox.List>
+              <Combobox.Arrow />
+            </Combobox.Content>
+          </Combobox.Portal>
+        </Combobox.Root>
+      )}
+    </FormRow>
+  );
+};
+
+ComboboxField.displayName = 'Form.ComboboxField';

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

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

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

@@ -10,7 +10,7 @@ import { Input } from '@dxos/react-ui';
 
 import { type FormFieldRendererProps } from '#types';
 
-import { FormFieldWrapper } from '../../FormFieldWrapper';
+import { FormRow } from '../../FormRow';
 
 /**
  * Stored value shapes:
@@ -66,19 +66,19 @@ export const DateField = ({
   );
 
   return (
-    <FormFieldWrapper<string> readonly={readonly} format={format} {...props}>
+    <FormRow<string> {...props} readonly={readonly} format={format}>
       {({ value }) => {
         switch (format) {
           case Format.TypeFormat.Date:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
                 <Input.Date
                   classNames='min-w-0 overflow-hidden'
-                  disabled={!!readonly}
+                  disabled={readonly}
                   value={value ?? ''}
                   onValueChange={handleSimpleChange}
                 />
-                <Input.TriggerIcon classNames='h-full' />
+                <Input.TriggerIcon />
               </div>
             );
           case Format.TypeFormat.Time:
@@ -86,18 +86,18 @@ export const DateField = ({
           case Format.TypeFormat.DateTime:
           default:
             return (
-              <div className='grid grid-cols-[minmax(0,1fr)_min-content] items-stretch gap-1'>
+              <div className='grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch'>
                 <Input.DateTime
                   classNames='min-w-0 overflow-hidden'
-                  disabled={!!readonly}
+                  disabled={readonly}
                   value={isoToLocalDateTime(value)}
                   onValueChange={handleDateTimeChange}
                 />
-                <Input.TriggerIcon classNames='h-full' />
+                <Input.TriggerIcon />
               </div>
             );
         }
       }}
-    </FormFieldWrapper>
+    </FormRow>
   );
 };

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

@@ -11,21 +11,17 @@ import { safeParseFloat } from '@dxos/util';
 import { translationKey } from '#translations';
 import { type FormFieldRendererProps } from '#types';
 
-import { FormFieldLabel } from '../../FormFieldWrapper';
+import { FormRow } from '../../FormRow';
 
 export const GeoPointField = ({
   type,
-  label,
-  jsonPath,
   readonly,
-  layout,
-  getStatus,
   getValue,
   onValueChange,
   onBlur,
+  ...props
 }: FormFieldRendererProps<GeoPoint>) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
   const geoPoint = useMemo<GeoPoint>(() => getValue() ?? [0, 0], [getValue]);
   const value = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
 
@@ -55,22 +51,23 @@ export const GeoPointField = ({
     [type, getValue, onValueChange],
   );
 
-  if ((readonly || layout === 'static') && !value?.latitude && !value?.longitude) {
-    return null;
-  }
-
   return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && (
-        <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} standalone />
-      )}
-      {layout === 'static' ? (
-        <LatLng {...value} />
-      ) : (
+    <FormRow<GeoPoint>
+      readonly={readonly}
+      getValue={getValue}
+      standalone
+      renderStatic={(point) => {
+        const location = GeoLocation.fromGeoPoint(point ?? [0, 0]);
+        // Treat a zero coordinate pair as empty (no meaningful location to display).
+        return !location.latitude && !location.longitude ? null : <LatLng {...location} />;
+      }}
+      {...props}
+    >
+      {({ presentation }) => (
         <div className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}
+              {presentation.showLabel && <Input.Label>{t('latitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
@@ -86,7 +83,7 @@ export const GeoPointField = ({
           </div>
           <div>
             <Input.Root>
-              {layout !== 'inline' && <Input.Label>{t('longitude.label')}</Input.Label>}
+              {presentation.showLabel && <Input.Label>{t('longitude.label')}</Input.Label>}
               <Input.TextInput
                 type='number'
                 step='0.00001'
@@ -102,7 +99,7 @@ export const GeoPointField = ({
           </div>
         </div>
       )}
-    </Input.Root>
+    </FormRow>
   );
 };
 

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

@@ -61,7 +61,7 @@ const RefStory = () => {
   return (
     <TestLayout>
       <Panel.Root>
-        <Panel.Content asChild>
+        <Panel.Content>
           <Form.Root schema={TextNoteHolder} values={values as any} db={space.db}>
             <Form.Viewport>
               <Form.Content>
@@ -96,7 +96,7 @@ const EmptyRefStory = () => {
   return (
     <TestLayout>
       <Panel.Root>
-        <Panel.Content asChild>
+        <Panel.Content>
           <Form.Root schema={EmptyRefSchema} defaultValues={{}} db={space.db}>
             <Form.Viewport>
               <Form.Content>

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

@@ -5,9 +5,9 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Obj, Ref } from '@dxos/echo';
-import { createDocAccessor } from '@dxos/echo-client';
-import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { type Database, Ref } from '@dxos/echo';
+import { Doc } from '@dxos/echo-doc';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Editor, useBasicMarkdownExtensions } from '@dxos/react-ui-editor';
 import { Text } from '@dxos/schema';
 import { createDataExtensions } from '@dxos/ui-editor';
@@ -15,10 +15,17 @@ import { createDataExtensions } from '@dxos/ui-editor';
 import { translationKey } from '#translations';
 import { type FormFieldRendererProps } from '#types';
 
-import { FormFieldLabel } from '../../FormFieldWrapper';
+import { FormRow } from '../../FormRow';
 
-const editorClassNames =
-  'transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2';
+// 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.
@@ -30,28 +37,30 @@ const editorClassNames =
 export const MarkdownField = ({
   type,
   readonly,
-  label,
-  jsonPath,
   placeholder,
-  layout,
   db,
-  getStatus,
   getValue,
   onValueChange,
+  ...props
 }: FormFieldRendererProps) => {
-  const { status, error } = getStatus();
   const isRef = Ref.isRefType(type);
-  const value = getValue();
 
-  if ((readonly || layout === 'static') && value == null) {
-    return null;
-  }
+  // The field value is a runtime union the form's value type can't express: a `Ref<Text>` when the
+  // property is a markdown ref, or a plain string when it is annotated markdown text. `isRef`
+  // selects the branch, so the casts below narrow the opaque value accordingly.
+  const renderStatic = (value: unknown) => {
+    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>;
+  };
 
-  const renderEditor = () => {
+  const renderEditor = (value: unknown) => {
     if (isRef) {
       const reference = value as Ref.Ref<any> | undefined;
       if (reference) {
-        return <RefMarkdownEditor reference={reference} placeholder={placeholder} />;
+        return <RefMarkdownEditor reference={reference} placeholder={placeholder} readonly={!!readonly} />;
       }
 
       if (readonly) {
@@ -71,20 +80,10 @@ export const MarkdownField = ({
     );
   };
 
-  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>;
-  };
-
   return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
-      {layout === 'static' ? renderStatic() : renderEditor()}
-      {layout === 'full' && <Input.Validation>{error}</Input.Validation>}
-    </Input.Root>
+    <FormRow readonly={readonly} getValue={getValue} renderStatic={renderStatic} {...props}>
+      {({ value }) => renderEditor(value)}
+    </FormRow>
   );
 };
 
@@ -94,21 +93,23 @@ const RefStaticText = ({ reference }: { reference: Ref.Ref<any> }) => {
   if (!text?.content) {
     return null;
   }
+
   return <p className='whitespace-pre-wrap'>{text.content}</p>;
 };
 
 type RefMarkdownEditorProps = {
   reference: Ref.Ref<any>;
   placeholder?: string;
+  readonly?: boolean;
 };
 
-const RefMarkdownEditor = ({ reference, placeholder }: RefMarkdownEditorProps) => {
+const RefMarkdownEditor = ({ reference, placeholder, readonly }: RefMarkdownEditorProps) => {
   const text = useAtomValue(useMemo(() => reference.atom, [reference]));
   const dataExtensions = useMemo(
-    () => (text ? [createDataExtensions({ id: reference.uri, text: createDocAccessor(text, ['content']) })] : []),
+    () => (text ? [createDataExtensions({ id: reference.uri, text: Doc.createAccessor(text, ['content']) })] : []),
     [text, reference],
   );
-  const extensions = useBasicMarkdownExtensions({ placeholder, extensions: dataExtensions });
+  const extensions = useBasicMarkdownExtensions({ placeholder, readonly, extensions: dataExtensions });
   if (!text) {
     return null;
   }
@@ -128,7 +129,7 @@ type StringMarkdownEditorProps = {
 };
 
 const StringMarkdownEditor = ({ value, placeholder, readonly, onChange }: StringMarkdownEditorProps) => {
-  const extensions = useBasicMarkdownExtensions({ placeholder });
+  const extensions = useBasicMarkdownExtensions({ placeholder, readonly });
   const handleChange = useCallback((next: string) => onChange(next), [onChange]);
 
   return (
@@ -151,18 +152,16 @@ type CreateTextButtonProps = {
 
 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));
+
+    onCreate(Ref.make(db.add(Text.make())));
   }, [db, onCreate]);
 
   return (
-    <Button onClick={handleClick} disabled={disabled}>
-      <Icon icon='ph--plus--regular' size={4} />
-      <span>{t('create-text.label')}</span>
-    </Button>
+    <IconButton icon='ph--plus--regular' label={t('create-text.label')} onClick={handleClick} disabled={disabled} />
   );
 };

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

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import { describe, test } from 'vitest';
+
+import { getNumericConstraints } from './NumberField';
+
+describe('getNumericConstraints', () => {
+  test('reads min/max from Schema.between (bounds live on separate nested refinements)', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.between(0, 23));
+    expect(getNumericConstraints(ast)).toEqual({ min: 0, max: 23, integer: false });
+  });
+
+  test('detects integer from Schema.int', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.int(), Schema.between(0, 23));
+    expect(getNumericConstraints(ast)).toEqual({ min: 0, max: 23, integer: true });
+  });
+
+  test('returns empty constraints for an unconstrained number', ({ expect }) => {
+    expect(getNumericConstraints(Schema.Number.ast)).toEqual({ integer: false });
+  });
+
+  test('aggregates stacked bounds to the strictest (intersection semantics)', ({ expect }) => {
+    const { ast } = Schema.Number.pipe(Schema.greaterThanOrEqualTo(5), Schema.greaterThanOrEqualTo(10));
+    expect(getNumericConstraints(ast)).toEqual({ min: 10, max: undefined, integer: false });
+  });
+});