@object-ui/fields 17.3.0 → 17.5.0

package/src/widgets/ImageField.tsx

@@ -7,6 +7,7 @@ import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
 import { ImageLightbox } from './ImageLightbox';
 import { useUploadingSignal } from './useUploadingSignal';
+import { maxSizeError, type TranslateFn } from './file-size-guard';
 import {
   fileValueForSubmit,
   readFileValues,
@@ -30,6 +31,12 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const imageField = field as any;
   const multiple = imageField?.multiple || false;
   const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
+  /**
+   * Max upload size in bytes. Delivered by `paramToField` for an action param
+   * and by the field config for a record field; enforced before any upload
+   * starts, exactly as FileField does (objectui#4141).
+   */
+  const maxSize = imageField?.maxSize as number | undefined;
   /**
    * Set `field.crop = false` to opt out of inline cropping. Defaults to enabled.
    */
@@ -39,6 +46,8 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const { upload } = useUpload();
   const { t } = useObjectTranslation();
   const [uploading, setUploading] = useState(false);
+  /** Client-side rejections (oversize picks), cleared on the next attempt. */
+  const [errors, setErrors] = useState<string[]>([]);
   // Display details of just-uploaded images, keyed by their new `sys_file` id.
   // Submitting the reference form means the field value no longer carries the
   // URL a thumbnail needs; these keep the preview visible until the next read
@@ -59,6 +68,18 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const handleCropConfirm = useCallback(
     async (blob: Blob, name: string) => {
       if (!cropTarget) return;
+      // The size that matters here is the CROP's, not the source image's: the
+      // cropper re-encodes to PNG, so cropping an in-limit JPEG can produce a
+      // blob over the limit. Checked before `setUploading` so a rejected crop
+      // never flashes the spinner, and the dialog closes so the message lands
+      // in the field's error row rather than behind the open dialog.
+      const rejection = maxSizeError(t as TranslateFn, { name, size: blob.size }, maxSize);
+      if (rejection) {
+        setErrors([rejection]);
+        setCropTarget(null);
+        return;
+      }
+      setErrors([]);
       setUploading(true);
       try {
         const result = await upload(blob);
@@ -76,7 +97,7 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
         setCropTarget(null);
       }
     },
-    [cropTarget, images, multiple, onChange, upload, remember],
+    [cropTarget, images, multiple, onChange, upload, remember, maxSize, t],
   );
 
   const openCropper = useCallback(
@@ -128,12 +149,32 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = Array.from(e.target.files || []);
+    // Reset the input up front rather than in `finally`: a pick rejected below
+    // returns before the upload runs, and leaving the old value in place would
+    // stop the user re-picking the same name after shrinking the image.
+    // `selectedFiles` already holds the File objects, so clearing is safe.
+    if (inputRef.current) inputRef.current.value = '';
     if (selectedFiles.length === 0) return;
 
+    // Enforce the declared limit before anything touches the network. Partial
+    // acceptance matches FileField: the in-limit picks of a multi-select still
+    // upload, and only the oversize ones are reported.
+    const rejections: string[] = [];
+    const validFiles = selectedFiles.filter((file) => {
+      const rejection = maxSizeError(t as TranslateFn, file, maxSize);
+      if (rejection) {
+        rejections.push(rejection);
+        return false;
+      }
+      return true;
+    });
+    setErrors(rejections);
+    if (validFiles.length === 0) return;
+
     setUploading(true);
     try {
       const imageObjects = await Promise.all(
-        selectedFiles.map(async (file) => {
+        validFiles.map(async (file) => {
           const result = await upload(file);
           remember(result, file.name);
           return fileValueForSubmit(result, file.name);
@@ -147,8 +188,6 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
       }
     } finally {
       setUploading(false);
-      // Reset input so picking the same file again still triggers change.
-      if (inputRef.current) inputRef.current.value = '';
     }
   };
 
@@ -237,6 +276,17 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
               ? t('fields.image.addMore')
               : t('fields.image.upload')}
         </Button>
+
+        {/* Client-side rejections (oversize picks). Same presentation as
+            FileField's error row — this widget previously had no surface for
+            them at all, because it never rejected anything (objectui#4141). */}
+        {errors.length > 0 && (
+          <div className="space-y-0.5">
+            {errors.map((err, i) => (
+              <p key={i} className="text-xs text-destructive">{err}</p>
+            ))}
+          </div>
+        )}
       </div>
 
       {cropEnabled && cropTarget && (

package/src/widgets/LookupField.hydration.test.tsx

@@ -71,7 +71,7 @@ describe('LookupField — multi-value hydration batches and shows loading (#3108
 
     // In-flight: loading indicator + raw committed count, no "Select…".
     await waitFor(() => expect(screen.getByTestId('lookup-hydrating')).toBeTruthy());
-    expect(screen.queryByText('Select...')).toBeNull();
+    expect(screen.queryByText('Select…')).toBeNull();
     expect(screen.getByText(/3/)).toBeTruthy();
 
     resolveFind({ data: USERS });

package/src/widgets/LookupField.tsx

@@ -218,9 +218,13 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
 
   const lookupField = field as any;
 
-  // When rendered via createFieldRenderer wrapper the actual objectSchema field
-  // metadata (reference_to, display_field, etc.) lives at lookupField.field.
-  // Unwrap it so lookup-specific properties resolve correctly.
+  // The form renderer passes `field: field.field || field` — `.field` is the
+  // declared metadata slot (objectui#3090) — so the actual objectSchema field
+  // metadata (reference_to, display_field, etc.) can arrive nested at
+  // `lookupField.field`. Unwrap it so lookup-specific properties resolve
+  // correctly. (This used to credit the docs-demo `createFieldRenderer` wrapper,
+  // which never produced the nesting and was removed in objectui#3910; the form
+  // path is the real producer.)
   // ObjectStack convention uses `reference` while the types use `reference_to`,
   // so we check for both property names.
   const innerField = lookupField?.field;
@@ -1078,7 +1082,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
               <Input
-                placeholder={t('common.search') + '...'}
+                placeholder={t('table.search')}
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
                 onKeyDown={handleSearchKeyDown}

package/src/widgets/MultiSelectField.tsx

@@ -3,6 +3,7 @@ import { Badge, EmptyValue, cn } from '@object-ui/components';
 import type { OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -52,16 +53,56 @@ export function MultiSelectField({
   // the scalar case we prune per-element rather than clearing the whole field.
   useEffect(() => {
     if (readonly) return;
+    // An empty offered set has THREE very different causes, and only one of them
+    // is a decision to prune against. This is the canonical copy of the guards;
+    // the other three option widgets carry the same pair.
+    //
+    // 1. Nothing was ever CONFIGURED (objectui#4220) — a field authored with no
+    //    `options` at all. No decision was made anywhere, and the widget renders
+    //    its "unfillable" state below. Pruning here is not a cascade, it is
+    //    deleting the stored value of a field the user was only ever shown a
+    //    hint for — measured on the detail page's inline editor, which stages
+    //    that empty array into the record draft the moment the row enters edit
+    //    mode, and on the grid's inline cell editor, which has always taken this
+    //    path.
+    if (rawOptions.length === 0) return;
+    // 2. The list is GATED (objectui#4247) — an authored list withheld because a
+    //    declared `dependsOn` parent is still empty, so `resolveCascadingOptions`
+    //    returns nothing at all. Gated means UNKNOWN, not invalid: the widget has
+    //    no information about which stored values are valid, which is exactly
+    //    what the `OptionsEmptyState` below tells the user ("select Country
+    //    first"). Clearing here fired on MOUNT with no interaction — a record
+    //    that merely ARRIVES with the parent empty (a later-cleared parent, an
+    //    import, a partially-migrated row) had its picklist silently staged for
+    //    deletion. Read from the resolver's own `gated` flag rather than
+    //    re-derived from `options.length === 0`, which would collide with case 1.
+    if (gated) return;
+    // 3. The list RESOLVED and genuinely excludes the value — a real cascade
+    //    (the parent changed, a predicate flipped). That is the ADR-0058
+    //    contract and it still prunes, below.
     if (selected.length === 0) return;
     const stillOffered = selected.filter((v) => options.some((o) => o.value === v));
     if (stillOffered.length !== selected.length) onChange(stillOffered);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, gated]);
 
+  // The host's group label has to be consumed on EVERY surface this widget can
+  // render, not only the editable one (objectui#3990): both branches below
+  // return before the editable container's `groupDomProps` spread, which is how
+  // a field-level `readonly: true` and a zero-option list ended up with a
+  // published label id and no consumer at all. See `toHostGroupProps`.
+  const hostGroupProps = toHostGroupProps(props);
+
   if (readonly) {
-    if (selected.length === 0) return <EmptyValue />;
+    // A readonly set of values is still a set, so it takes the same `group`
+    // answer the editable chip row gives. `EmptyValue` is that surface with
+    // nothing in it: it publishes an `aria-label` ("No value") of its own, and
+    // `aria-labelledby` outranks that per accname — correctly, because on the
+    // `generic` role that placeholder span carries, an author name is prohibited
+    // and never exposed, so the real choice is the field's name or no name.
+    if (selected.length === 0) return <EmptyValue {...hostGroupProps} />;
     return (
-      <div className="flex flex-wrap gap-1">
+      <div {...hostGroupProps} className="flex flex-wrap gap-1">
         {selected.map((v) => {
           // Label from the raw set so a stored value hidden by `visibleWhen`
           // still renders its label rather than a bare id.
@@ -84,6 +125,9 @@ export function MultiSelectField({
         dependsOnFields={dependsOnFields}
         testId={fieldName ? `multiselect-empty-${fieldName}` : undefined}
         className="min-h-9"
+        // This box IS the field in this state, so it is what the host label
+        // names (objectui#3990).
+        hostGroupProps={hostGroupProps}
       />
     );
   }
@@ -105,10 +149,20 @@ export function MultiSelectField({
     name: _domName,
     ...groupDomProps
   } = toDomProps(props);
+  // When the host associated its visible label with this container by IDREF
+  // (`aria-labelledby`, objectui#3961 / #3975) the container IS the labelled
+  // group, so it answers with the matching role — without one, the name sits on
+  // a generic `div` and contributes nothing: `label for` pointing here was
+  // already inert (`HTMLLabelElement.control` is null for a div), which is the
+  // whole defect. Each chip keeps its own accessible name from its text content,
+  // which the group name does not override. Absent (standalone: the inline grid
+  // editor, a bare SDUI node) nothing is emitted and the markup is unchanged.
+  const isLabelledGroup = groupDomProps['aria-labelledby'] != null;
 
   return (
     <div
       {...groupDomProps}
+      role={isLabelledGroup ? 'group' : undefined}
       className={cn('flex flex-wrap gap-1.5', className)}
       data-testid={fieldName ? `multiselect-${fieldName}` : undefined}
     >

package/src/widgets/OptionsEmptyState.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { cn } from '@object-ui/components';
 import { useFieldTranslation } from './useFieldTranslation';
+import type { HostGroupProps } from './toHostGroupProps';
 
 /**
  * The "this option list cannot be filled" state shared by every fixed-option
@@ -52,6 +53,19 @@ export interface OptionsEmptyStateProps {
   testId?: string;
   /** Widget-specific sizing (the dropdown is a fixed `h-9`, lists grow). */
   className?: string;
+  /**
+   * The host label's IDREF plumbing, when this box is the whole rendered surface
+   * of a group-labelled field (objectui#3990) — a `checkboxes` / `radio` /
+   * `multiselect` whose option list came back empty renders NOTHING but this
+   * box, so the visible label named zero elements until it landed here.
+   *
+   * A closed three-key type rather than an open props tail: only `id`,
+   * `aria-labelledby` and the `role` that makes them meaningful may reach this
+   * element, and reopening a spread is what objectui#3291 exists to prevent.
+   * Absent for the single `SelectField` — it is not group-labelled, its label
+   * still uses a plain `for`, and it must keep emitting no such attributes.
+   */
+  hostGroupProps?: HostGroupProps;
 }
 
 export function OptionsEmptyState({
@@ -60,6 +74,7 @@ export function OptionsEmptyState({
   dependsOnFields,
   testId,
   className,
+  hostGroupProps,
 }: OptionsEmptyStateProps) {
   const { t } = useFieldTranslation();
   // The host's hint when it computed one; otherwise this widget's own copy,
@@ -71,6 +86,7 @@ export function OptionsEmptyState({
       : t('fields.options.empty'));
   return (
     <div
+      {...hostGroupProps}
       data-testid={testId}
       className={cn(
         'flex w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground',

package/src/widgets/RadioField.tsx

@@ -3,6 +3,7 @@ import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/compon
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
@@ -49,17 +50,37 @@ export function RadioField({
   // (parent changed / predicate flipped), drop it so no stale pair persists.
   useEffect(() => {
     if (readonly) return;
+    // Never configured → nothing to prune against; see `MultiSelectField`'s
+    // copy of this guard for the measured failure (objectui#4220).
+    if (rawOptions.length === 0) return;
+    // Gated → the authored list is withheld until the `dependsOn` parent is
+    // chosen, so the empty offered set is missing information, not a verdict on
+    // the stored value; clearing here fired on mount (objectui#4247). Same
+    // reasoning, at length, in `MultiSelectField`.
+    if (gated) return;
     if (value === undefined || value === null || (value as unknown) === '') return;
     if (!isValueStillOffered(value, options)) onChange?.(undefined as unknown as string);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, gated]);
 
+  // The host's group label has to be consumed on EVERY surface this widget can
+  // render, not only the `RadioGroup` (objectui#3990): both branches below return
+  // before that spread, which is how a field-level `readonly: true` and a
+  // zero-option list ended up with a published label id and no consumer at all.
+  // See `toHostGroupProps` — note the role it emits is `group`, not the
+  // `radiogroup` the editable branch keeps: there is not one radio left in
+  // either of these surfaces.
+  const hostGroupProps = toHostGroupProps(props);
+
   if (readonly) {
-    if (value == null || value === '') return <EmptyValue />;
+    // `EmptyValue`'s own `aria-label` ("No value") is outranked by
+    // `aria-labelledby` per accname, and on the `generic` role that placeholder
+    // span carries it was never exposed as a name anyway.
+    if (value == null || value === '') return <EmptyValue {...hostGroupProps} />;
     // Label from the raw set so a stored value hidden by `visibleWhen` still
     // renders its label rather than a bare id.
     const opt = rawOptions.find((o) => o.value === value);
-    return <span className="text-sm">{opt?.label || String(value)}</span>;
+    return <span {...hostGroupProps} className="text-sm">{opt?.label || String(value)}</span>;
   }
 
   // No offered options is unfillable — surface a legible state instead of an
@@ -74,12 +95,23 @@ export function RadioField({
         dependsOnFields={dependsOnFields}
         testId={fieldName ? `radio-empty-${fieldName}` : undefined}
         className="min-h-9"
+        // This box IS the field in this state, so it is what the host label
+        // names (objectui#3990).
+        hostGroupProps={hostGroupProps}
       />
     );
   }
 
   return (
-    // DOM pass-through onto the radiogroup (objectui#3318). Unlike Radix
+    // DOM pass-through onto the radiogroup (objectui#3318). It also carries the
+    // host's group label: when the form renderer associates its `<FormLabel>` by
+    // IDREF (`aria-labelledby`, objectui#3961) that key rides in this same
+    // whitelist spread — `toDomProps` forwards the whole `aria-` family — so this
+    // widget needs no branch of its own. `radiogroup` is already a member of the
+    // group role family, so nothing here overrides it with `role="group"`: it is
+    // the more specific role AND the correct carrier of `aria-invalid` below.
+    //
+    // Unlike Radix
     // `Select.Root` (#3306) this Root IS a real DOM element — a
     // `<div role="radiogroup">` — and `radiogroup` is exactly the role
     // WAI-ARIA designates to carry `aria-invalid` for a set of radios

package/src/widgets/RatingField.tsx

@@ -3,6 +3,7 @@ import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 
 /**
  * Rating field widget - provides a star rating input
@@ -19,8 +20,11 @@ export function RatingField({ value, onChange, field, readonly, className, error
   const displayValue = hoverValue !== null ? hoverValue : currentValue;
 
   if (readonly) {
+    // The readonly star row is the field's whole rendered surface, so it — not
+    // only the editable row below — consumes the host's group label
+    // (objectui#3990). See `toHostGroupProps`.
     return (
-      <div className={cn("flex items-center gap-1", className)}>
+      <div {...toHostGroupProps(props)} className={cn("flex items-center gap-1", className)}>
         {Array.from({ length: max }, (_, i) => (
           <Star
             key={i}
@@ -50,9 +54,18 @@ export function RatingField({ value, onChange, field, readonly, className, error
     name: _domName,
     ...groupDomProps
   } = toDomProps(props);
+  // When the host named this container by IDREF (`aria-labelledby`,
+  // objectui#3961) it IS the labelled group of stars, so it answers with the
+  // matching role; a `label for` pointing at this `div` was inert. Standalone
+  // (no host label) the markup is unchanged.
+  const isLabelledGroup = groupDomProps['aria-labelledby'] != null;
 
   return (
-    <div {...groupDomProps} className={cn("flex items-center gap-1", className)}>
+    <div
+      {...groupDomProps}
+      role={isLabelledGroup ? 'group' : undefined}
+      className={cn("flex items-center gap-1", className)}
+    >
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}

package/src/widgets/RecordPickerDialog.baseFilterShapes.test.tsx

@@ -0,0 +1,191 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * `RecordPickerDialog.baseFilter` accepts TWO shapes — objectui#3831.
+ *
+ * The slot was declared `Record< string, any >` and merged by object spread,
+ * which serves the dependent-lookup chain (#2215) exactly right and cannot
+ * carry a spec `ViewFilterRule[]` at all: TypeScript accepts an array there
+ * (an array satisfies a string index of `any`), the spread flattens it to
+ * `{"0": rule, "1": rule}`, and the query then filters on columns literally
+ * named `0`/`1` — green types, wrong query, no diagnostic. That is the slot
+ * `record:related_list.add.picker.filter` has to reach.
+ *
+ * So the merge now discriminates on shape, and both directions are pinned here:
+ *
+ *  - **record form** keeps KEY-OVERWRITE precedence, byte for byte. A cascaded
+ *    parent value must REPLACE a stale same-field `lookupFilters` entry, not
+ *    intersect with it — `account = 'stale' AND account = 'a1'` returns nothing.
+ *    (`LookupField.dependsOn.test.tsx` owns the #2215 behaviour end-to-end and
+ *    is deliberately left untouched; this file pins the same precedence at the
+ *    dialog's own boundary, so a future merge change cannot pass by only
+ *    satisfying the array path.)
+ *  - **rule array** lowers through `mergeFilterNodes`, the repo's single filter
+ *    sink, so all 19 `VIEW_FILTER_OPERATORS` survive — including the four
+ *    (`before`, `after`, `is_empty`, `is_not_empty`) the MongoDB-style record
+ *    form has no `$op` for and which a hand-rolled second lowering would have
+ *    had to drop or throw on.
+ */
+
+import { render, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { RecordPickerDialog } from './RecordPickerDialog';
+
+const records = [{ id: 'r1', name: 'One' }];
+
+function makeDataSource() {
+  const find = vi.fn(async () => ({ data: records, total: records.length }));
+  return { find } as any;
+}
+
+/** The `$filter` of the most recent query. */
+function lastFilter(ds: any) {
+  const calls = ds.find.mock.calls;
+  return calls[calls.length - 1][1]?.$filter;
+}
+
+describe('RecordPickerDialog baseFilter — record form (#2215 precedence)', () => {
+  it('spreads a record baseFilter last, overwriting lookupFilters on the same field', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="contacts"
+        onSelect={vi.fn()}
+        lookupFilters={[{ field: 'account', operator: 'eq', value: 'stale' }]}
+        baseFilter={{ account: 'a1' }}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    // Still the plain record form — NOT lowered to an AST, and emphatically not
+    // an `and` of the stale value with the cascaded one.
+    expect(lastFilter(ds)).toEqual({ account: 'a1' });
+    expect(Array.isArray(lastFilter(ds))).toBe(false);
+  });
+
+  it('sends no $filter at all when nothing is constrained', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="contacts"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toBeUndefined();
+  });
+});
+
+describe('RecordPickerDialog baseFilter — spec ViewFilterRule[] (#3831)', () => {
+  it('lowers a rule array to AST nodes instead of spreading it into index keys', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        baseFilter={[{ field: 'is_active', operator: 'equals', value: true }]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([['is_active', 'equals', true]]);
+    // The old object-spread failure mode, pinned by structure rather than by
+    // key: the spread produced a PLAIN OBJECT whose values were still rule
+    // objects (`{"0": {field, operator, value}}`), so the query asked for a
+    // column named `0`. Asserting on `Object.keys` cannot tell the two apart —
+    // an array's keys are its indices too — so what is pinned is that each
+    // element is an AST TRIPLE and no longer carries a `field` member.
+    const filter = lastFilter(ds) as unknown[];
+    expect(Array.isArray(filter)).toBe(true);
+    expect(Array.isArray(filter[0])).toBe(true);
+    expect(filter[0]).not.toHaveProperty('field');
+  });
+
+  it('preserves the four operators the record form cannot spell', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_license"
+        onSelect={vi.fn()}
+        baseFilter={[
+          { field: 'starts_at', operator: 'before', value: '2026-01-01' },
+          { field: 'expires_at', operator: 'after', value: '2026-01-01' },
+          { field: 'revoked_at', operator: 'is_empty' },
+          { field: 'assigned_to', operator: 'is_not_empty' },
+        ]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([
+      ['starts_at', 'before', '2026-01-01'],
+      ['expires_at', 'after', '2026-01-01'],
+      // A rule with no `value` stays two-element: inventing `null` here would be
+      // a real `{revoked_at: null}` predicate, i.e. a different question.
+      ['revoked_at', 'is_empty'],
+      ['assigned_to', 'is_not_empty'],
+    ]);
+  });
+
+  it('keeps a record baseFilter and a rule array as separate `and` children', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        // A rule array is the author's restriction; the record-form base still
+        // arrives via `lookupFilters` here, and the two must BOTH apply.
+        lookupFilters={[{ field: 'company', operator: 'eq', value: 'c1' }]}
+        baseFilter={[{ field: 'is_active', operator: 'equals', value: true }]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([
+      'and',
+      ['company', '=', 'c1'],
+      [['is_active', 'equals', true]],
+    ]);
+  });
+
+  it('sends no $filter for an empty rule array', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        baseFilter={[]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    // An empty restriction is no restriction — not an empty `$filter` the wire
+    // has to interpret.
+    expect(lastFilter(ds)).toBeUndefined();
+  });
+});