feat(fields): select+multiple → multi-value chip picker; restore fields/core lint gates (#2709)

* feat(fields): render select+multiple through the multi-value chip picker

A `select` field/param declared `multiple: true` is a multi-value selector
(spec allows `multiple` on select), but it rendered a single-value dropdown
that could hold only one value. SelectField now delegates to the multi-value
chip picker (the multiselect widget) when `multiple` is set, storing a string[].

Delegating inside SelectField — rather than at a type-resolution layer — means
every surface that renders the `select` widget inherits multi-select
identically: the object form, the inline grid editor, and the app-shell
ActionParamDialog. No per-surface drift, no divergence from the form (which was
the risk of special-casing it only in the param adapter). Single selects keep
the cascading dropdown; multi + per-option visibleWhen cascading is not a
combination in use today.

Tests: SelectField renders chip toggles (not a combobox) when multiple, toggles
values as an array, and renders badges in readonly mode. Docs: fields README
"Multi-value selects". Changeset: @object-ui/fields minor.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rg7oavKSUdb2KzYEEYrCHX

* fix(fields,core): clear baseline lint errors to restore package lint gates

The @object-ui/fields and @object-ui/core package lints were red at baseline,
so the gate could not catch NEW violations. Cleared all errors (behavior
unchanged):

fields (react-hooks/rules-of-hooks — hooks were called after early returns):
- ImageField: hoist the two useCallback handlers (+ their `images` dep) above
  the readonly early return.
- TextAreaField: hoist the two useState calls above the readonly early return.
- index.tsx: useFieldTranslate no longer wraps useObjectTranslation in
  try/catch (the hook is provider-safe and never throws; try/catch around a
  hook is the violation). Mirrors useFieldLabel.

core:
- ExpressionEvaluator: preserve-caught-error — the package targets ES2020 whose
  lib types only the 1-arg Error constructor, so `{ cause }` won't compile; the
  original message is inlined and the rule is disabled with that justification.
- SafeExpressionParser: drop the useless `op` null-initializer (every branch
  assigns or breaks); drop the useless `\-` escape in a char class.
- export-filename: drop the useless `\/` escape; the intentional control-char
  range keeps a justified no-control-regex disable.
- record-title: `let display` -> `const` (never reassigned).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rg7oavKSUdb2KzYEEYrCHX

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: os-zhuang

.changeset/select-multiple-multiselect-and-lint.md

@@ -0,0 +1,24 @@
+---
+"@object-ui/fields": minor
+"@object-ui/core": patch
+---
+
+feat(fields): render `select` + `multiple` through the multi-value chip picker; restore fields/core lint gates
+
+- **Multi-value select** — a `select` field/param declared `multiple: true`
+  now renders the multi-value chip picker (the `multiselect` widget) and stores
+  a `string[]`, instead of collapsing to a single-value dropdown that could
+  hold only one value. The delegation lives inside `SelectField`, so the object
+  form, the inline grid editor, and the app-shell `ActionParamDialog` all
+  inherit it from the one `select` widget with no per-surface drift. Single
+  selects keep the cascading dropdown (multi + per-option `visibleWhen`
+  cascading is not a combination in use today).
+- **`autonumber` mapping is unchanged** here; this change is orthogonal.
+- **Lint gates restored** — fixed the pre-existing baseline lint errors that
+  had left the `@object-ui/fields` and `@object-ui/core` package lints red (so
+  the gate could not catch new violations): `react-hooks/rules-of-hooks` in
+  `ImageField` / `TextAreaField` / `index.tsx` (hooks hoisted above early
+  returns; the `useFieldTranslate` hook no longer wrapped in try/catch), plus
+  `no-useless-assignment` / `no-useless-escape` / `no-control-regex` /
+  `prefer-const` / `preserve-caught-error` in the core evaluator and utils. No
+  behavior change from the lint fixes.

packages/core/src/evaluator/ExpressionEvaluator.ts

@@ -169,6 +169,10 @@ export class ExpressionEvaluator {
       // Execute with context values
       return compiled.fn(...varValues);
     } catch (error) {
+      // The original error's message is inlined below. We can't pass it as the
+      // `Error` `cause` option because this package targets ES2020, whose lib
+      // types the 1-arg `Error` constructor only; hence the scoped disable.
+      // eslint-disable-next-line preserve-caught-error
       throw new Error(`Failed to evaluate expression "${expression}": ${(error as Error).message}`);
     }
   }

packages/core/src/evaluator/SafeExpressionParser.ts

@@ -313,7 +313,10 @@ export class SafeExpressionParser {
 
     // eslint-disable-next-line no-constant-condition
     while (true) {
-      let op: string | null = null;
+      // Every branch below either assigns `op` or `break`s out of the loop, so
+      // `op` is always set by the time the switch reads it (no null initializer
+      // needed).
+      let op: string;
 
       if (this.peek() === '=' && this.peek(1) === '=' && this.peek(2) === '=') {
         op = '==='; this.pos += 3;
@@ -659,7 +662,7 @@ export class SafeExpressionParser {
     // Optional exponent: e+5, E-3
     if (/[eE]/.test(this.source[this.pos] ?? '')) {
       this.pos++; // consume 'e' or 'E'
-      if (/[+\-]/.test(this.source[this.pos] ?? '')) this.pos++; // optional sign
+      if (/[+-]/.test(this.source[this.pos] ?? '')) this.pos++; // optional sign
 
       let expDigits = 0;
       while (this.pos < this.source.length && /\d/.test(this.source[this.pos])) {

packages/core/src/utils/export-filename.ts

@@ -9,7 +9,10 @@
  */
 
 /** Windows-reserved + control characters that cannot appear in a filename. */
-const ILLEGAL_FILENAME_CHARS = /[\\\/:*?"<>|\u0000-\u001f]+/g;
+// The control-char range in the class is matched deliberately (illegal in
+// filenames, must be stripped), so no-control-regex is intentionally disabled.
+// eslint-disable-next-line no-control-regex
+const ILLEGAL_FILENAME_CHARS = /[\\/:*?"<>|\u0000-\u001f]+/g;
 
 /** Longest base we emit — keeps the full name comfortably under OS limits. */
 const MAX_BASE_LENGTH = 80;

packages/core/src/utils/record-title.ts

@@ -83,6 +83,18 @@ or photo per row without opening the row form (objectui#2360). Columns accept
 exported as `FileCell`). Auto-derived subform columns map `file`/`image`/
 `avatar` fields to file columns instead of dropping them.
 
+### Multi-value selects
+
+A `select` field declared `multiple: true` selects zero-or-more values (spec
+allows `multiple` on `select`). `SelectField` delegates to the multi-value chip
+picker (the same widget the `multiselect` type uses) and stores a `string[]`.
+Delegating inside `SelectField` — rather than at a type-resolution layer — means
+every surface that renders the `select` widget (the object form, the inline grid
+editor, and the app-shell `ActionParamDialog`) gets multi-select identically,
+with no per-surface drift. Single-value selects keep the cascading dropdown
+below. (A multi-value select forgoes per-option `visibleWhen` cascading, which
+the chip picker does not implement.)
+
 ### Cascading & role-gated select options
 
 `select` options support a per-option `visibleWhen` CEL predicate (offered only

packages/fields/README.md

@@ -277,12 +277,11 @@ function useFieldLabel() {
  * fallback in that case.
  */
 function useFieldTranslate(): ((key: string, params?: Record<string, unknown>) => string) | undefined {
-  try {
-    const { t } = useObjectTranslation();
-    return t as (key: string, params?: Record<string, unknown>) => string;
-  } catch {
-    return undefined;
-  }
+  // useObjectTranslation is provider-safe (optional context read; react-i18next
+  // falls back to the global instance), so it never throws — no try/catch, which
+  // would wrap a hook call and violate rules-of-hooks. Mirrors useFieldLabel.
+  const { t } = useObjectTranslation();
+  return t as (key: string, params?: Record<string, unknown>) => string;
 }
 
 import { TextField } from './widgets/TextField';

packages/fields/src/index.tsx

@@ -213,6 +213,50 @@ describe('Standard Field Widgets', () => {
       );
       expect(container.textContent).toBe('Option A');
     });
+
+    // A `select` declared `multiple` is a multi-value picker (spec allows
+    // `multiple` on select). SelectField delegates to the chip picker so the
+    // form, inline editor, and ActionParamDialog all get multi-select from the
+    // one `select` widget — no single-select fallback, no per-surface drift.
+    it('renders the multi-value chip picker when field.multiple is set', () => {
+      render(
+        <SelectField
+          value={['a']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+        />
+      );
+      // Chip picker uses toggle buttons (aria-pressed), not a Radix combobox.
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+      const optionA = screen.getByRole('button', { name: 'Option A' });
+      expect(optionA).toHaveAttribute('aria-pressed', 'true');
+      expect(screen.getByRole('button', { name: 'Option B' })).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('multi-select toggles values as an array', () => {
+      render(
+        <SelectField
+          value={['a']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+        />
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Option B' }));
+      expect(mockOnChange).toHaveBeenCalledWith(['a', 'b']);
+    });
+
+    it('multi-select renders selected values as badges in readonly mode', () => {
+      const { container } = render(
+        <SelectField
+          value={['a', 'b']}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, multiple: true } as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('Option A');
+      expect(container.textContent).toContain('Option B');
+    });
   });
 
   describe('BooleanField', () => {

packages/fields/src/standard-widgets.test.tsx

@@ -29,10 +29,50 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const [uploading, setUploading] = useState(false);
   useUploadingSignal(uploading, onUploadingChange);
 
+  // Derived value + memoized handlers must run before the readonly early return
+  // so hook order stays stable across renders.
+  const images = value ? (Array.isArray(value) ? value : [value]) : [];
+
+  const handleCropConfirm = useCallback(
+    async (blob: Blob, name: string) => {
+      if (!cropTarget) return;
+      setUploading(true);
+      try {
+        const result = await upload(blob);
+        const next = {
+          name: result.name || name,
+          original_name: name,
+          size: result.size,
+          mime_type: result.mimeType,
+          url: result.url,
+        };
+        if (multiple) {
+          const updated = [...images];
+          updated[cropTarget.index] = next;
+          onChange(updated);
+        } else {
+          onChange(next);
+        }
+      } finally {
+        setUploading(false);
+        setCropTarget(null);
+      }
+    },
+    [cropTarget, images, multiple, onChange, upload],
+  );
+
+  const openCropper = useCallback(
+    (index: number) => {
+      const img = images[index];
+      if (!img?.url) return;
+      setCropTarget({ index, src: img.url, name: img.name || `image-${index}.png` });
+    },
+    [images],
+  );
+
   if (readonly) {
     if (!value) return <EmptyValue />;
-    
-    const images = Array.isArray(value) ? value : [value];
+
     return (
       <div className="flex flex-wrap gap-2">
         {images.map((img: any, idx: number) => (
@@ -47,8 +87,6 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
     );
   }
 
-  const images = value ? (Array.isArray(value) ? value : [value]) : [];
-
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = Array.from(e.target.files || []);
     if (selectedFiles.length === 0) return;
@@ -89,43 +127,6 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
     }
   };
 
-  const handleCropConfirm = useCallback(
-    async (blob: Blob, name: string) => {
-      if (!cropTarget) return;
-      setUploading(true);
-      try {
-        const result = await upload(blob);
-        const next = {
-          name: result.name || name,
-          original_name: name,
-          size: result.size,
-          mime_type: result.mimeType,
-          url: result.url,
-        };
-        if (multiple) {
-          const updated = [...images];
-          updated[cropTarget.index] = next;
-          onChange(updated);
-        } else {
-          onChange(next);
-        }
-      } finally {
-        setUploading(false);
-        setCropTarget(null);
-      }
-    },
-    [cropTarget, images, multiple, onChange, upload],
-  );
-
-  const openCropper = useCallback(
-    (index: number) => {
-      const img = images[index];
-      if (!img?.url) return;
-      setCropTarget({ index, src: img.url, name: img.name || `image-${index}.png` });
-    },
-    [images],
-  );
-
   return (
     <div className={props.className}>
       <input

packages/fields/src/widgets/ImageField.tsx

@@ -17,9 +17,33 @@ import { SchemaRendererContext, usePredicateScope } from '@object-ui/react';
 import { SelectFieldMetadata } from '@object-ui/types';
 import { useFieldTranslation } from './useFieldTranslation';
 import { FieldWidgetProps } from './types';
+import { MultiSelectField } from './MultiSelectField';
 
 /**
- * SelectField - Dropdown selection widget with configurable options.
+ * SelectField - dropdown selection widget.
+ *
+ * A field declared `multiple: true` selects zero-or-more values (spec:
+ * `multiple` is valid on `select`), so it renders the multi-value chip picker
+ * — the same widget the `multiselect` type uses. Delegating here (rather than
+ * only at a type-resolution layer) means every surface that renders the
+ * `select` widget — the object form, the inline grid editor, and
+ * `ActionParamDialog` — inherits multi-select identically, with no drift
+ * between them. Single-value selects keep the cascading dropdown below.
+ *
+ * (A `multiple` select forgoes per-option `visibleWhen` cascading, which the
+ * chip picker does not implement; single selects retain it. Multi-select +
+ * cascading is not a combination in use today.)
+ */
+export function SelectField(props: FieldWidgetProps<any>) {
+  const config = (props.field || (props as any).schema) as SelectFieldMetadata | undefined;
+  if ((config as any)?.multiple) {
+    return <MultiSelectField {...props} />;
+  }
+  return <SingleSelectField {...(props as FieldWidgetProps<string>)} />;
+}
+
+/**
+ * SingleSelectField - single-value dropdown with configurable options.
  *
  * Supports cascading / role-gated options (#2284): each option may carry a
  * `visibleWhen` CEL predicate, evaluated against the live form record +
@@ -29,7 +53,7 @@ import { FieldWidgetProps } from './types';
  * of those is empty the control is gated with a "select the parent first" hint,
  * mirroring the dependent-lookup UX.
  */
-export function SelectField({
+function SingleSelectField({
   value,
   onChange,
   field,