@object-ui/fields 16.0.0 → 17.1.0

package/src/widgets/CheckboxesField.tsx

@@ -1,48 +1,114 @@
-import React, { useId } from 'react';
+import React, { useId, useEffect } from 'react';
 import { Checkbox, Label, EmptyValue, Badge } from '@object-ui/components';
+import type { OptionLike } from '@object-ui/core';
 import { FieldWidgetProps } from './types';
+import { useCascadingOptions } from './useCascadingOptions';
 
-interface Option { label: string; value: string }
+type Option = OptionLike;
 
 /**
  * CheckboxesField - select zero or more values from a fixed option set, rendered
  * as a list of checkboxes. The stored value is a string[]. Used for the
  * `checkboxes` field type.
+ *
+ * Options support the same per-option `visibleWhen` cascading + `dependsOn`
+ * gating as `MultiSelectField` (ADR-0058 / #2715), resolved through the shared
+ * {@link useCascadingOptions} hook: the offered boxes narrow against the live
+ * form record + `current_user`, the control is gated behind a "select the parent
+ * first" hint while a dependency is empty, and selections no longer offered
+ * (parent changed / predicate flipped) are pruned from the array.
  */
-export function CheckboxesField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string[]>) {
-  const config = (field || (props as any).schema) as any;
-  const options: Option[] = config?.options || [];
+export function CheckboxesField({
+  value,
+  onChange,
+  field,
+  readonly,
+  className,
+  schema,
+  dependentValues,
+  dependsOn: dependsOnProp,
+  emptyHint: _emptyHint,
+  dataSource: _dataSource,
+  ...props
+}: FieldWidgetProps<string[]>) {
+  const config = (field || schema) as any;
+  const rawOptions: Option[] = config?.options || [];
   const selected: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const groupId = useId();
+  const fieldName = (props as any).name || config?.name || (props as any).id || '';
+
+  const dependsOn = config?.dependsOn ?? dependsOnProp;
+  const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
+    rawOptions,
+    dependsOn,
+    dependentValues,
+  );
+
+  // Cascade clear: prune selected values the offered set no longer includes
+  // (parent changed / predicate flipped), keeping the ones still valid — the
+  // per-element clear the multi-value case needs (cf. the scalar select/radio).
+  useEffect(() => {
+    if (readonly) return;
+    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]);
 
   if (readonly) {
     if (selected.length === 0) return <EmptyValue />;
     return (
       <div className="flex flex-wrap gap-1">
         {selected.map((v) => {
-          const opt = options.find((o) => o.value === v);
+          // 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 === v);
           return <Badge key={v} variant="outline">{opt?.label || v}</Badge>;
         })}
       </div>
     );
   }
 
+  // No offered options is unfillable — surface a legible state instead of an
+  // empty checkbox list: a dependency-gated list prompts for its controlling
+  // field; an unconfigured / fully-filtered list says so. Mirrors the select.
+  if (options.length === 0) {
+    const hint = gated
+      ? `Select ${dependsOnFields.join(' / ')} first`
+      : 'No options available';
+    return (
+      <div
+        data-testid={fieldName ? `checkboxes-empty-${fieldName}` : undefined}
+        className="flex min-h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
+      >
+        {hint}
+      </div>
+    );
+  }
+
   const toggle = (v: string, checked: boolean) => {
     const next = checked ? [...selected.filter((x) => x !== v), v] : selected.filter((x) => x !== v);
     onChange(next);
   };
 
   return (
-    <div className={className}>
+    <div
+      className={className}
+      data-testid={fieldName ? `checkboxes-${fieldName}` : undefined}
+    >
       {options.map((opt) => {
-        const id = `${groupId}-${opt.value}`;
+        // Multi-value fields store string arrays — stringify the (possibly
+        // numeric, #3090-widened) authored value at this boundary.
+        const value = String(opt.value);
+        const id = `${groupId}-${value}`;
         return (
-          <div key={opt.value} className="flex items-center space-x-2 py-0.5">
+          <div key={value} className="flex items-center space-x-2 py-0.5">
             <Checkbox
               id={id}
-              checked={selected.includes(opt.value)}
-              onCheckedChange={(checked) => toggle(opt.value, !!checked)}
+              checked={selected.includes(value)}
+              onCheckedChange={(checked) => toggle(value, !!checked)}
               disabled={(props as any).disabled}
+              data-testid={`checkboxes-option-${value}`}
             />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>
           </div>

package/src/widgets/FileField.tsx

@@ -1,8 +1,18 @@
 import React, { useRef, useState, useCallback } from 'react';
 import { Button, EmptyValue } from '@object-ui/components';
 import { useUpload } from '@object-ui/providers';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetProps } from './types';
+import { useUploadingSignal } from './useUploadingSignal';
+import {
+  fileValueForSubmit,
+  readFileValues,
+  uploadResultView,
+  withRecentUploads,
+  isImageValue,
+  type FileValueView,
+} from './file-value';
 
 /**
  * Shared upload pipeline for the file widgets: validates size, uploads through
@@ -10,6 +20,13 @@ import { FieldWidgetProps } from './types';
  * into the field value — append for `multiple`, replace otherwise. Extracted so
  * the full-size FileField and the compact grid-cell {@link FileCell} stay
  * behaviourally identical (same value shape, same error handling).
+ *
+ * Stores the **reference form** — a bare `sys_file` id — when the upload
+ * adapter surfaced one, and the legacy inline blob when it did not, so the same
+ * build works against a backend that has adopted file-as-reference and one that
+ * has not (see `file-value`). Because a bare id carries no name or URL, each
+ * completed upload's display details are kept in `recent`, keyed by id, so the
+ * file renders immediately instead of as a bare token until a read enriches it.
  */
 function useFileUploads(opts: {
   files: any[];
@@ -19,9 +36,11 @@ function useFileUploads(opts: {
 }) {
   const { files, multiple, maxSize, onChange } = opts;
   const { upload } = useUpload();
+  const { t } = useObjectTranslation();
   const [errors, setErrors] = useState<string[]>([]);
   const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
   const [uploading, setUploading] = useState(false);
+  const [recent, setRecent] = useState<Record<string, FileValueView>>({});
 
   const processFiles = useCallback(async (selectedFiles: File[]) => {
     if (selectedFiles.length === 0) return;
@@ -30,7 +49,10 @@ function useFileUploads(opts: {
     const validFiles = selectedFiles.filter(file => {
       if (maxSize && file.size > maxSize) {
         const maxMB = (maxSize / (1024 * 1024)).toFixed(1);
-        newErrors.push(`"${file.name}" exceeds max size (${maxMB} MB)`);
+        newErrors.push(t('fields.file.exceedsMaxSize', {
+          defaultValue: `"${file.name}" exceeds max size (${maxMB} MB)`,
+          name: file.name, max: maxMB,
+        }));
         return false;
       }
       return true;
@@ -41,42 +63,51 @@ function useFileUploads(opts: {
 
     setUploading(true);
     try {
-      const fileObjects = await Promise.all(
+      const uploaded = await Promise.all(
         validFiles.map(async (file) => {
           try {
             const result = await upload(file, {
               onProgress: (ratio) =>
                 setUploadProgress((prev) => ({ ...prev, [file.name]: ratio })),
             });
-            return {
-              name: result.name,
-              original_name: file.name,
-              size: result.size,
-              mime_type: result.mimeType,
-              url: result.url,
-            };
+            return { result, originalName: file.name };
           } catch (err) {
-            newErrors.push(`Failed to upload "${file.name}": ${(err as Error).message}`);
+            newErrors.push(t('fields.file.uploadFailed', {
+              defaultValue: `Failed to upload "${file.name}": ${(err as Error).message}`,
+              name: file.name, error: (err as Error).message,
+            }));
             setErrors([...newErrors]);
             return null;
           }
         }),
       );
-      const successful = fileObjects.filter(Boolean) as any[];
+      const successful = uploaded.filter(Boolean) as Array<{ result: any; originalName: string }>;
       if (successful.length === 0) return;
 
+      // Remember what each new id looks like so it can render before the next
+      // read expands it back into `{ id, name, size, mimeType, url }`.
+      const views: Record<string, FileValueView> = {};
+      for (const { result, originalName } of successful) {
+        const view = uploadResultView(result, originalName);
+        if (view.id) views[view.id] = view;
+      }
+      if (Object.keys(views).length > 0) setRecent((prev) => ({ ...prev, ...views }));
+
+      const nextValues = successful.map(({ result, originalName }) =>
+        fileValueForSubmit(result, originalName),
+      );
       if (multiple) {
-        onChange([...files, ...successful]);
+        onChange([...files, ...nextValues]);
       } else {
-        onChange(successful[0]);
+        onChange(nextValues[0]);
       }
     } finally {
       setUploading(false);
       setUploadProgress({});
     }
-  }, [files, multiple, onChange, maxSize, upload]);
+  }, [files, multiple, onChange, maxSize, upload, t]);
 
-  return { processFiles, errors, uploading, uploadProgress };
+  return { processFiles, errors, uploading, uploadProgress, recent };
 }
 
 /**
@@ -84,7 +115,8 @@ function useFileUploads(opts: {
  * Supports single and multiple file uploads with configurable accepted file types.
  * L2: File size validation, per-file progress indicators, error messages.
  */
-export function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+export function FileField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetProps<any>) {
+  const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const cameraRef = useRef<HTMLInputElement>(null);
   const fileField = (field || (props as any).schema) as any;
@@ -108,9 +140,14 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
   const [isDragOver, setIsDragOver] = useState(false);
 
   const files = value ? (Array.isArray(value) ? value : [value]) : [];
-  const { processFiles, errors, uploading, uploadProgress } = useFileUploads({
+  const { processFiles, errors, uploading, uploadProgress, recent } = useFileUploads({
     files, multiple, maxSize, onChange,
   });
+  const fallbackName = t('fields.file.fileFallback', { defaultValue: 'File' });
+  // Normalised for display: accepts a bare reference id, the expanded
+  // `{ id, name, size, mimeType, url }`, or a legacy inline blob.
+  const views = withRecentUploads(readFileValues(value, fallbackName), recent);
+  useUploadingSignal(uploading, onUploadingChange);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -147,13 +184,12 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
 
   if (readonly) {
     if (!value) return <EmptyValue />;
-    
-    const readonlyFiles = Array.isArray(value) ? value : [value];
+
     return (
       <div className="flex flex-wrap gap-2">
-        {readonlyFiles.map((file: any, idx: number) => (
+        {views.map((file, idx) => (
           <span key={idx} className="text-sm truncate max-w-xs">
-            {file.name || file.original_name || 'File'}
+            {file.name}
           </span>
         ))}
       </div>
@@ -173,11 +209,6 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
     }
   };
 
-  const isImage = (file: any) => {
-    const mime = file.mime_type || '';
-    return mime.startsWith('image/');
-  };
-
   return (
     <div className={props.className}>
       <input
@@ -196,7 +227,7 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
           capture={cameraEnabled}
           onChange={handleFileChange}
           className="hidden"
-          aria-label="Camera capture"
+          aria-label={t('fields.file.cameraCapture', { defaultValue: 'Camera capture' })}
           data-testid="file-field-camera-input"
         />
       )}
@@ -228,10 +259,14 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
           <Upload className={`size-8 ${isDragOver ? 'text-primary' : 'text-muted-foreground'}`} />
           <div className="text-center">
             <p className="text-sm font-medium">
-              {isDragOver ? 'Drop files here' : 'Drag & drop files here'}
+              {isDragOver
+                ? t('fields.file.dropFilesHere', { defaultValue: 'Drop files here' })
+                : t('fields.file.dragDropHere', { defaultValue: 'Drag & drop files here' })}
             </p>
             <p className="text-xs text-muted-foreground mt-1">
-              or click to browse{cameraEnabled ? ' • use the camera button below' : ''}
+              {cameraEnabled
+                ? t('fields.file.browseHintCamera', { defaultValue: 'or click to browse • use the camera button below' })
+                : t('fields.file.browseHint', { defaultValue: 'or click to browse' })}
             </p>
           </div>
         </div>
@@ -249,7 +284,9 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
             data-testid="file-field-camera-button"
           >
             <Camera className="size-4 mr-2" />
-            {cameraEnabled === 'user' ? 'Take selfie' : 'Take photo'}
+            {cameraEnabled === 'user'
+              ? t('fields.file.takeSelfie', { defaultValue: 'Take selfie' })
+              : t('fields.file.takePhoto', { defaultValue: 'Take photo' })}
           </Button>
         )}
 
@@ -258,12 +295,14 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
           <div className="flex items-center gap-2 text-xs text-muted-foreground" data-testid="file-field-uploading">
             <Loader2 className="size-3 animate-spin" />
             <span>
-              Uploading…
-              {Object.keys(uploadProgress).length > 0 &&
-                ` (${Math.round(
-                  (Object.values(uploadProgress).reduce((s, v) => s + v, 0) /
-                    Object.keys(uploadProgress).length) * 100,
-                )}%)`}
+              {(() => {
+                const keys = Object.keys(uploadProgress);
+                if (keys.length === 0) return t('fields.file.uploading', { defaultValue: 'Uploading…' });
+                const pct = Math.round(
+                  (Object.values(uploadProgress).reduce((s, v) => s + v, 0) / keys.length) * 100,
+                );
+                return t('fields.file.uploadingPct', { defaultValue: `Uploading… (${pct}%)`, pct });
+              })()}
             </span>
           </div>
         )}
@@ -278,23 +317,23 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
         )}
 
         {/* File list */}
-        {files.length > 0 && (
+        {views.length > 0 && (
           <div className="space-y-1">
-            {files.map((file: any, idx: number) => (
+            {views.map((file, idx) => (
               <div
                 key={idx}
                 className="flex items-center justify-between gap-2 p-2 bg-muted/50 rounded-md border"
               >
                 <div className="flex items-center gap-2 flex-1 min-w-0">
-                  {isImage(file) && file.url ? (
+                  {isImageValue(file) && file.url ? (
                     <img src={file.url} alt={file.name} className="size-8 object-cover rounded shrink-0" />
-                  ) : isImage(file) ? (
+                  ) : isImageValue(file) ? (
                     <ImageIcon className="size-4 text-muted-foreground shrink-0" />
                   ) : (
                     <FileIcon className="size-4 text-muted-foreground shrink-0" />
                   )}
                   <span className="text-sm truncate">
-                    {file.name || file.original_name || 'File'}
+                    {file.name}
                   </span>
                   {file.size && (
                     <span className="text-xs text-muted-foreground">
@@ -354,11 +393,14 @@ export function FileCell({
   /** Focus-grid coordinate (see GridField keyboard navigation). */
   'data-cell'?: string;
 }) {
+  const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const files = value ? (Array.isArray(value) ? value : [value]) : [];
-  const { processFiles, errors, uploading } = useFileUploads({
+  const { processFiles, errors, uploading, recent } = useFileUploads({
     files, multiple: !!multiple, maxSize, onChange,
   });
+  const fallbackName = t('fields.file.fileFallback', { defaultValue: 'File' });
+  const views = withRecentUploads(readFileValues(value, fallbackName), recent);
 
   const removeAt = (index: number) => {
     if (multiple) {
@@ -369,9 +411,6 @@ export function FileCell({
     }
   };
 
-  const isImage = (file: any) => String(file?.mime_type || '').startsWith('image/');
-  const nameOf = (file: any) =>
-    typeof file === 'string' ? file : file?.name || file?.original_name || 'File';
   const showUpload = !disabled && !uploading && (multiple || files.length === 0);
 
   return (
@@ -387,24 +426,24 @@ export function FileCell({
         }}
         className="hidden"
       />
-      {files.map((file: any, idx: number) => (
+      {views.map((file, idx) => (
         <span
           key={idx}
           className="inline-flex max-w-40 items-center gap-1 rounded border bg-muted/50 px-1 py-0.5 text-xs"
-          title={nameOf(file)}
+          title={file.name}
           data-testid="file-cell-chip"
         >
-          {isImage(file) && file.url ? (
-            <img src={file.url} alt={nameOf(file)} className="size-5 shrink-0 rounded object-cover" />
+          {isImageValue(file) && file.url ? (
+            <img src={file.url} alt={file.name} className="size-5 shrink-0 rounded object-cover" />
           ) : (
             <FileIcon className="size-3 shrink-0 text-muted-foreground" />
           )}
-          <span className="truncate">{nameOf(file)}</span>
+          <span className="truncate">{file.name}</span>
           {!disabled && (
             <button
               type="button"
               className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground"
-              aria-label={`Remove ${nameOf(file)}`}
+              aria-label={t('fields.file.remove', { defaultValue: `Remove ${file.name}`, name: file.name })}
               onClick={() => removeAt(idx)}
             >
               <X className="size-3" />
@@ -432,7 +471,7 @@ export function FileCell({
           disabled={disabled}
         >
           <Upload className="size-3.5" />
-          {files.length === 0 && 'Upload'}
+          {files.length === 0 && t('fields.file.upload', { defaultValue: 'Upload' })}
         </Button>
       )}
       {errors.length > 0 && (

package/src/widgets/FilterConditionField.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FilterBuilder, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetProps } from './types';
+import { useFieldTranslation } from './useFieldTranslation';
 
 /**
  * FilterConditionField — visual criteria builder for a stored FilterCondition
@@ -101,7 +102,13 @@ function toArray(value: any): any[] {
   return value == null ? [] : [value];
 }
 
-function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+/**
+ * Builder condition → `$`-operator criteria. Exported for tests: this is the
+ * chokepoint where a builder token becomes a spec `FieldOperatorsSchema` key,
+ * and a wrong spelling here is rejected downstream by `convertFiltersToAST`
+ * rather than at authoring time. @internal
+ */
+export function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
   const { field, operator, value } = c || ({} as BuilderCondition);
   if (!field) return null;
   const t = typeOf(field);
@@ -110,9 +117,23 @@ function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefi
     case 'equals': return { [field]: cv };
     case 'notEquals': return { [field]: { $ne: cv } };
     case 'contains': return { [field]: { $contains: value } };
-    case 'notContains': return { [field]: { $ncontains: value } };
+    // `$notContains` is the spec spelling (FieldOperatorsSchema, data/filter.zod.ts).
+    // This emitted `$ncontains` — a token that appears nowhere in @objectstack/spec and
+    // that convertFiltersToAST throws on, so every "does not contain" rule authored here
+    // was rejected downstream. See kvToCondition for reading the old spelling back.
+    case 'notContains': return { [field]: { $notContains: value } };
+    // String-specific spec operators — previously unreachable from the
+    // builder UI even though FieldOperatorsSchema accepts them (#2942).
+    case 'startsWith': return { [field]: { $startsWith: value } };
+    case 'endsWith': return { [field]: { $endsWith: value } };
     case 'isEmpty': return { [field]: { $in: [null, ''] } };
     case 'isNotEmpty': return { [field]: { $nin: [null, ''] } };
+    // Null / existence spec operators. Distinct from isEmpty/isNotEmpty,
+    // which also treat '' as empty.
+    case 'isNull': return { [field]: { $null: true } };
+    case 'isNotNull': return { [field]: { $null: false } };
+    case 'exists': return { [field]: { $exists: true } };
+    case 'notExists': return { [field]: { $exists: false } };
     case 'greaterThan':
     case 'after': return { [field]: { $gt: cv } };
     case 'lessThan':
@@ -133,7 +154,11 @@ function filterGroupToMongo(group: BuilderGroup, typeOf: (f: string) => string |
   const frags = (group?.conditions ?? [])
     .map((c) => condToMongo(c, typeOf))
     .filter((x): x is Record<string, any> => !!x);
-  if (frags.length === 0) return null; // empty = match all
+  // No conditions → no predicate. NOT "match all": a sharing rule with an
+  // empty criteria is refused on save, and one already stored shares nothing
+  // (objectstack#3896 / ADR-0049). `null` becomes an empty stored value, which
+  // is what the required-criteria messaging below keys off.
+  if (frags.length === 0) return null;
   if (group.logic === 'or') return { $or: frags };
   if (frags.length === 1) return frags[0];
   const keys = frags.flatMap((f) => Object.keys(f));
@@ -145,7 +170,13 @@ function arraysEqual(a: any, b: any[]): boolean {
   return Array.isArray(a) && a.length === b.length && a.every((v, i) => v === b[i]);
 }
 
-function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
+/**
+ * Criteria → builder condition (the reverse of {@link condToMongo}). Returning
+ * `null` makes the builder refuse to load the rule ("criteria can't be
+ * represented"), so this must keep accepting spellings previously written.
+ * @internal
+ */
+export function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
   const id = `c_${idx}_${field}`;
   if (v === null || typeof v !== 'object' || Array.isArray(v)) {
     return { id, field, operator: 'equals', value: v };
@@ -157,11 +188,19 @@ function kvToCondition(field: string, v: any, idx: number): BuilderCondition | n
     switch (op) {
       case '$ne': return { id, field, operator: 'notEquals', value: val };
       case '$contains': return { id, field, operator: 'contains', value: val };
+      // `$ncontains` is the pre-fix spelling this widget used to emit. Criteria saved
+      // before the fix still carry it, so keep reading it — dropping it here would make
+      // those rules fail to load ("criteria can't be represented") instead of migrating.
+      case '$notContains':
       case '$ncontains': return { id, field, operator: 'notContains', value: val };
       case '$gt': return { id, field, operator: 'greaterThan', value: val };
       case '$lt': return { id, field, operator: 'lessThan', value: val };
       case '$gte': return { id, field, operator: 'greaterOrEqual', value: val };
       case '$lte': return { id, field, operator: 'lessOrEqual', value: val };
+      case '$startsWith': return { id, field, operator: 'startsWith', value: val };
+      case '$endsWith': return { id, field, operator: 'endsWith', value: val };
+      case '$null': return { id, field, operator: val === false ? 'isNotNull' : 'isNull', value: '' };
+      case '$exists': return { id, field, operator: val === false ? 'notExists' : 'exists', value: '' };
       case '$in':
         return arraysEqual(val, [null, ''])
           ? { id, field, operator: 'isEmpty', value: '' }
@@ -212,6 +251,37 @@ function mongoToFilterGroup(mongo: any): BuilderGroup | null {
   return { id: 'root', logic: 'and', conditions };
 }
 
+/**
+ * Would this criteria select EVERY record of the object?
+ *
+ * Mirrors the server's `isMatchAllCriteria` (objectstack `plugin-sharing`,
+ * #3896) closely enough to warn before the round-trip: blank, `{}`, `[]`, and
+ * the vacuous combinators. Deliberately conservative in the same direction —
+ * the cost of a false positive is one extra hint, the cost of a false negative
+ * is a save that fails with a toast. The server stays authoritative.
+ *
+ * @internal exported for tests
+ */
+export function isMatchAllCriteria(parsed: any): boolean {
+  if (parsed == null) return true;
+  if (Array.isArray(parsed)) return parsed.every(isMatchAllCriteria);
+  if (typeof parsed !== 'object') return true;
+  const entries = Object.entries(parsed);
+  if (entries.length === 0) return true;
+  for (const [key, value] of entries) {
+    if (key === '$and') {
+      if (!Array.isArray(value) || value.every(isMatchAllCriteria)) continue;
+      return false;
+    }
+    if (key === '$or') {
+      if (!Array.isArray(value) || value.length === 0 || value.some(isMatchAllCriteria)) continue;
+      return false;
+    }
+    return false;
+  }
+  return true;
+}
+
 function stringifyValue(value: string | object | undefined | null): string {
   if (value == null || value === '') return '';
   if (typeof value === 'string') return value;
@@ -230,6 +300,7 @@ export function FilterConditionField({
   ...props
 }: FieldWidgetProps<string | object>) {
   const ctx = React.useContext(SchemaRendererContext);
+  const { t } = useFieldTranslation();
   const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
   const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
   const objectName = String(dependentValues.object_name ?? '');
@@ -269,6 +340,13 @@ export function FilterConditionField({
     [parsed],
   );
 
+  // Only flag a criteria that PARSES to match-all. Unparsable JSON has its own
+  // message (`invalidJson`) and must not collect a second, contradictory one.
+  const isEmptyCriteria = React.useMemo(
+    () => parsed.ok && isMatchAllCriteria(parsed.mongo),
+    [parsed],
+  );
+
   // Raw JSON mode: forced when the stored value can't be represented in the
   // builder; otherwise opt-in via the toggle.
   const representable = parsed.ok && group !== null;
@@ -290,14 +368,22 @@ export function FilterConditionField({
   if (!objectName) {
     return (
       <p className={cn('text-sm text-muted-foreground', className)}>
-        Select an object first.
+        {t('fields.filterCondition.selectObjectFirst')}
       </p>
     );
   }
 
   if (readonly) {
     if (!rawValue.trim()) {
-      return <span className={cn('text-sm text-muted-foreground', className)}>All records</span>;
+      // Used to read "All records" — which was both wrong and the most
+      // dangerous thing this widget could say (objectstack#3896). A rule with
+      // no criteria has never usefully shared everything; it now shares
+      // nothing and is refused on save, so name that instead.
+      return (
+        <span className={cn('text-sm text-destructive', className)}>
+          {t('fields.filterCondition.noCriteria')}
+        </span>
+      );
     }
     return (
       <pre className={cn('overflow-x-auto rounded bg-muted/40 p-2 text-xs', className)}>
@@ -317,7 +403,7 @@ export function FilterConditionField({
             onChange={(e) => onChange(e.target.value as any)}
           />
           {!parsed.ok && (
-            <span className="text-xs text-destructive">Invalid JSON — the rule will match no records until fixed.</span>
+            <span className="text-xs text-destructive">{t('fields.filterCondition.invalidJson')}</span>
           )}
         </>
       ) : (
@@ -327,14 +413,28 @@ export function FilterConditionField({
           onChange={handleBuilderChange as any}
         />
       )}
+      {/*
+        The server refuses to save a criteria that would select every record
+        (objectstack#3896), but that rejection only arrives as a toast after
+        the admin hits Save. Say it here, while they are still looking at the
+        empty builder — and never imply that leaving it empty means "share
+        everything", which is what this widget used to do.
+      */}
+      {isEmptyCriteria && (
+        <span className="text-xs text-destructive">
+          {t('fields.filterCondition.criteriaRequired')}
+        </span>
+      )}
       <button
         type="button"
         className="self-start text-xs text-muted-foreground underline-offset-2 hover:underline"
         onClick={() => setRawMode((m) => !m)}
         disabled={!representable && !rawMode}
-        title={!representable ? 'This criteria can only be edited as JSON' : undefined}
+        title={!representable ? t('fields.filterCondition.jsonOnly') : undefined}
       >
-        {rawMode ? 'Use visual builder' : 'Edit as JSON'}
+        {rawMode
+          ? t('fields.filterCondition.useVisualBuilder')
+          : t('fields.filterCondition.editAsJson')}
       </button>
     </div>
   );