@object-ui/fields 11.3.0 → 11.5.0

package/dist/widgets/LookupField.dependsOn.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/PeoplePicker.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+import { DataSource, LookupFilterDef } from '@object-ui/types';
+/**
+ * PeoplePicker — the Tier 0, search-first user picker (issue #2112).
+ *
+ * A single-column picker: search box → recent contacts → rich candidate rows
+ * (avatar + name + department·email) → a live SelectionTray for multi-select.
+ * Composed from the reusable {@link useRecordQuery} kernel and
+ * {@link SelectionTray}; a future org-tree tier reuses both beside a left tree.
+ *
+ * Container is responsive: a centered Dialog on desktop, a bottom Sheet on
+ * mobile (<768px). Interaction: full keyboard model (↑/↓ move the cursor, ↵
+ * toggles/commits, Backspace on an empty search removes the last chip, Esc
+ * closes), matched-term highlighting in rows, skeletons on first load with no
+ * flash-to-empty on refetch, and friendly empty / error+retry states.
+ *
+ * Candidate hygiene (e.g. `banned != true`), the department `$expand`, and the
+ * avatar/subtitle field config are supplied by the caller (UserField). Pinyin /
+ * employee-id search is server-side and transparent — the client only sends the
+ * term.
+ */
+export interface PeoplePickerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    multiple?: boolean;
+    dataSource: DataSource;
+    /** Object to query — `sys_user` for user fields. */
+    objectName: string;
+    displayField?: string;
+    idField?: string;
+    /** Dotted field paths for the row subtitle, e.g. `['primary_business_unit_id.name','email']`. */
+    subtitleFields?: string[];
+    avatarField?: string;
+    /** Related entities to expand (e.g. `['primary_business_unit_id']` for the department name). */
+    expand?: string[];
+    /** Narrow the server searchable set (ADR-0061). */
+    searchFields?: string[];
+    pageSize?: number;
+    /** Base candidate filters (e.g. exclude banned users). */
+    lookupFilters?: LookupFilterDef[];
+    /**
+     * Hard filter constraints in QueryParams.$filter record form — the
+     * dependent (cascading) lookup chain (#2215). Always ANDed into the
+     * candidate query; spread after `lookupFilters` so it wins on conflicts.
+     */
+    baseFilter?: Record<string, any>;
+    /** Current selection (id, or id[] when `multiple`). */
+    value?: any;
+    onSelect: (value: any) => void;
+    onSelectRecords?: (records: any[]) => void;
+    /**
+     * Render as an inline combobox anchored to {@link trigger} — a Popover
+     * dropdown on desktop, a bottom Sheet on mobile — instead of a centered
+     * modal Dialog. In inline mode multi-select commits live on each toggle
+     * (the caller's field chips are the selection), so there's no staging tray
+     * or confirm button.
+     */
+    inline?: boolean;
+    /** The element the inline dropdown/sheet anchors to (the field trigger). */
+    trigger?: React.ReactNode;
+}
+export declare function PeoplePicker({ open, onOpenChange, title, multiple, dataSource, objectName, displayField, idField, subtitleFields, avatarField, expand, searchFields, pageSize, lookupFilters, baseFilter: baseFilterProp, value, onSelect, onSelectRecords, inline, trigger, }: PeoplePickerProps): React.JSX.Element;

package/dist/widgets/PeoplePicker.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/PeoplePickerComponents.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/PersonRow.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+/**
+ * A rich, single-line candidate row for the search-first PeoplePicker:
+ * avatar (image with initials fallback) + name + subtitle (department · email).
+ * The subtitle is what lets search stand in for an org tree — it disambiguates
+ * same-named people inline. The typed query is highlighted in both lines.
+ * Selectable/toggleable; a Check marks the selected state, and `active` reflects
+ * the keyboard cursor (scrolls itself into view).
+ */
+export interface PersonRowProps {
+    record: any;
+    displayField?: string;
+    subtitleFields?: string[];
+    avatarField?: string;
+    selected?: boolean;
+    /** Keyboard cursor is on this row — highlight + scroll into view. */
+    active?: boolean;
+    /** Typed search term; matches are highlighted in name + subtitle. */
+    highlightQuery?: string;
+    onSelect?: (record: any) => void;
+    className?: string;
+}
+export declare function PersonRow({ record, displayField, subtitleFields, avatarField, selected, active, highlightQuery, onSelect, className, }: PersonRowProps): React.JSX.Element;

package/dist/widgets/RecordPickerDialog.d.ts

@@ -125,6 +125,14 @@ export interface RecordPickerDialogProps {
      * Restricts which records are selectable (e.g. only active records).
      */
     lookupFilters?: LookupFilterDef[];
+    /**
+     * Hard filter constraints applied to every query, in QueryParams.$filter
+     * record form. Unlike `lookupFilters`, entries here never surface in the
+     * filter bar and cannot be overridden by user filter input — used for the
+     * dependent (cascading) lookup chain, where the parent field's value MUST
+     * scope the candidate set (#2215).
+     */
+    baseFilter?: Record<string, any>;
     /**
      * Cell renderer resolver function.
      * When provided, columns with a `type` property will be rendered using the
@@ -177,4 +185,4 @@ export interface RecordPickerDialogProps {
  * states, and single/multi-select.  Responsive: mobile-friendly width
  * via Tailwind breakpoints.
  */
-export declare function RecordPickerDialog({ open, onOpenChange, title, multiple, dataSource, objectName, columns: columnsProp, displayField, titleFormat, idField, pageSize, value, onSelect, onSelectRecords, lookupFilters, cellRenderer, filterColumns, renderFilterBar, renderGrid, }: RecordPickerDialogProps): React.JSX.Element;
+export declare function RecordPickerDialog({ open, onOpenChange, title, multiple, dataSource, objectName, columns: columnsProp, displayField, titleFormat, idField, pageSize, value, onSelect, onSelectRecords, lookupFilters, baseFilter, cellRenderer, filterColumns, renderFilterBar, renderGrid, }: RecordPickerDialogProps): React.JSX.Element;

package/dist/widgets/SelectionTray.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+/**
+ * "Selected" transfer-box area (穿梭框式已选区): live echo of the current
+ * multi-selection as removable avatar chips. Reusable kernel — the future
+ * org-tree tier composes the same tray beside its right-hand list. Purely
+ * presentational: it takes the resolved records + an onRemove callback, and
+ * accepts already-translated `label`/`emptyText` so it stays i18n-agnostic.
+ */
+export interface SelectionTrayProps {
+    /** Full record objects for the current selection. */
+    records: any[];
+    /** Remove a selected record by its id. */
+    onRemove: (id: any) => void;
+    displayField?: string;
+    avatarField?: string;
+    idField?: string;
+    /** Header label, e.g. "Selected (3)" — omit to hide the header. */
+    label?: string;
+    /** When provided, a "Clear all" action shows in the header while non-empty. */
+    onClear?: () => void;
+    /** Localized "Clear all" text (i18n-agnostic — caller passes it). */
+    clearLabel?: string;
+    /** Shown when the selection is empty. */
+    emptyText?: string;
+    className?: string;
+}
+export declare function SelectionTray({ records, onRemove, displayField, avatarField, idField, label, onClear, clearLabel, emptyText, className, }: SelectionTrayProps): React.JSX.Element;

package/dist/widgets/UserField.d.ts

@@ -1,16 +1,3 @@
 import { default as React } from 'react';
 import { FieldWidgetProps } from './types';
-/**
- * UserField — person picker for the `user` field type.
- *
- * `user` is a lookup specialized to the `sys_user` system object (see framework
- * "lookup → sys_user" specialization). Rather than re-implement candidate search,
- * the searchable picker, the record-picker dialog and id resolution, this widget
- * **delegates to the shared {@link LookupField}** with the reference fixed to
- * `sys_user`. The author writes `Field.user({ multiple })`; we normalise the field
- * metadata so the lookup machinery targets users with a sensible display field.
- *
- * Table-cell display (avatars / initials) is handled separately by
- * `UserCellRenderer`; this is the form/editor widget.
- */
 export declare function UserField(props: FieldWidgetProps<any>): React.JSX.Element;

package/dist/widgets/UserFieldPicker.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/deriveLookupColumns.d.ts

@@ -11,7 +11,14 @@ interface ObjectSchemaLike {
         label?: string;
         hidden?: boolean;
     }>;
-    /** Object-level "fields to display in search result cards" (spec metadata). */
+    /**
+     * ADR-0085 semantic role: the object's most important fields. The single
+     * source for "how to list this object" — shared with the detail-page related
+     * list — so a lookup picker and a related list of the same object agree on
+     * columns with zero per-surface config.
+     */
+    highlightFields?: unknown;
+    /** Object-level "fields to display in search result cards" (legacy spec metadata). */
     displayFields?: unknown;
 }
 /**
@@ -19,9 +26,10 @@ interface ObjectSchemaLike {
  * a lookup field declares no explicit `lookup_columns`.
  *
  * Priority:
- *   1. The referenced object's own `displayFields` ("fields to display in
- *      search result cards") — the author's declared search-card shape.
- *   2. Otherwise the display field plus the next few business fields in
+ *   1. The referenced object's ADR-0085 `highlightFields` — the canonical
+ *      "how to list this object" set, shared with the detail-page related list.
+ *   2. Else the object's legacy `displayFields` search-card shape.
+ *   3. Otherwise the display field plus the next few business fields in
  *      declaration order, skipping system/audit fields and heavy non-tabular
  *      types.
  *

package/dist/widgets/personDisplay.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+/**
+ * Pure display helpers for person (sys_user) records, shared by the
+ * search-first PeoplePicker's rich rows, the SelectionTray chips, and the
+ * read-only user cell renderer. Kept framework-free so they're trivially
+ * unit-testable and reusable by a future org-tree tier.
+ */
+/** Resolve a possibly-dotted path (e.g. `primary_business_unit_id.name`) against a record. */
+export declare function resolvePath(record: any, path: string): any;
+/** Best display name for a person record, tolerating expanded / raw shapes. */
+export declare function getPersonName(record: any, nameField?: string): string;
+/**
+ * Up-to-2-char initials for the avatar fallback.
+ * - "John Doe" → "JD"; "John" → "JO"
+ * - CJK single token → trailing 1–2 chars (given name): "张三" → "张三", "王小明" → "小明"
+ */
+export declare function getPersonInitials(name: string): string;
+/** Secondary line: resolve each field path, drop empties, join with " · ". */
+export declare function getPersonSubtitle(record: any, fields?: string[]): string;
+/** Avatar image URL (defaults to `sys_user.image`); undefined when absent. */
+export declare function getPersonAvatarUrl(record: any, avatarField?: string): string | undefined;
+/** Record id, tolerating `id` / `_id` / a custom id field. */
+export declare function getPersonId(record: any, idField?: string): any;
+/**
+ * Case-insensitive literal-substring match ranges of `query` in `text`, as
+ * `[start, end)` index pairs. Used to highlight the typed term in candidate
+ * rows — a strong disambiguation aid for same-named people. Pinyin matches are
+ * resolved server-side and won't have client ranges; that's fine, the row still
+ * shows, just without a highlight.
+ */
+export declare function matchRanges(text: string, query: string): Array<[number, number]>;

package/dist/widgets/personDisplay.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/widgets/useRecordQuery.d.ts

@@ -0,0 +1,87 @@
+import { DataSource } from '@object-ui/types';
+/**
+ * useRecordQuery — the shared record-query kernel behind record pickers.
+ *
+ * Encapsulates the query/pagination/search/sort loop that was previously
+ * duplicated (and independently tuned) inside `RecordPickerDialog.fetchRecords`
+ * and `LookupField.fetchLookupData`:
+ *
+ * - builds the `QueryParams` (`$top`/`$skip`/`$search`/`$searchFields`/
+ *   `$orderby`/`$filter`/`$expand`),
+ * - issues `dataSource.find(objectName, params)` and normalises the result
+ *   (`{ data, total }`, tolerating a bare array),
+ * - owns `records`/`loading`/`error`/`total` plus the `page`/`search`/`sort`
+ *   controls, with a debounced search path,
+ * - clears itself when `enabled` goes false (e.g. a dialog closing).
+ *
+ * The caller keeps ownership of *selection* state and of record→option mapping;
+ * this hook only answers "what records match the current query". It is the
+ * reusable core the search-first PeoplePicker (and a future org-tree tier)
+ * compose on top of.
+ *
+ * Effect shape intentionally mirrors the original components to preserve
+ * behaviour: the fetch effect keys on page/sort/filter/expand (NOT `search`,
+ * which drives its own debounced fetch), and state resets live in a separate
+ * `enabled`-keyed effect so they never cascade into a fetch (React #185).
+ */
+export interface UseRecordQueryOptions {
+    /** Backing data source. When absent/invalid the hook stays idle. */
+    dataSource?: DataSource | null;
+    /** Object/resource name to query (e.g. `sys_user`). */
+    objectName?: string | null;
+    /**
+     * Gate fetching. When false no request is issued and query state is cleared.
+     * Typically wired to a dialog's `open`, plus any "dependencies satisfied"
+     * guard. Default `true`.
+     */
+    enabled?: boolean;
+    /** `$top` — page size. Default 50. */
+    pageSize?: number;
+    /**
+     * When true, use page-based pagination (`$skip = (page - 1) * pageSize`).
+     * When false (default) a single page of `pageSize` records is fetched.
+     */
+    paginate?: boolean;
+    /**
+     * `$filter` — already merged by the caller (base `lookup_filters`, dependent
+     * lookup chain, candidate hygiene like `banned != true`, …). Compared by
+     * value, so a referentially-new-but-equal object each render will not loop.
+     */
+    filter?: Record<string, any>;
+    /** `$expand` — related entities to include (e.g. `['primary_business_unit_id']`). */
+    expand?: string[];
+    /** `$searchFields` — narrow the server searchable set (ADR-0061). */
+    searchFields?: string[];
+    /** Debounce applied to {@link UseRecordQueryResult.setSearch}, in ms. Default 300. */
+    debounceMs?: number;
+}
+export interface RecordQuerySort {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+export interface UseRecordQueryResult {
+    /** Records returned by the current query. */
+    records: any[];
+    loading: boolean;
+    error: string | null;
+    /** Total matching records (server-reported, else the current page length). */
+    total: number;
+    /** `ceil(total / pageSize)`, at least 1. */
+    totalPages: number;
+    page: number;
+    search: string;
+    sort: RecordQuerySort | null;
+    /** Jump to a page (1-indexed). No-op unless `paginate` is set. */
+    setPage: (page: number) => void;
+    /** Set the search term; debounced, and resets to page 1. */
+    setSearch: (query: string) => void;
+    /** Toggle sort on a field (new field → asc, same field → flip); resets to page 1. */
+    toggleSort: (field: string) => void;
+    /** Set the sort directly (or clear with `null`); resets to page 1. */
+    setSort: (sort: RecordQuerySort | null) => void;
+    /** Clear query state (search/page/sort/records/error). */
+    reset: () => void;
+    /** Imperatively refetch with the current params. */
+    refetch: () => void;
+}
+export declare function useRecordQuery(options: UseRecordQueryOptions): UseRecordQueryResult;

package/dist/widgets/useRecordQuery.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "11.3.0",
+  "version": "11.5.0",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -30,12 +30,12 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
-    "@object-ui/components": "11.3.0",
-    "@object-ui/core": "11.3.0",
-    "@object-ui/i18n": "11.3.0",
-    "@object-ui/providers": "11.3.0",
-    "@object-ui/react": "11.3.0",
-    "@object-ui/types": "11.3.0"
+    "@object-ui/components": "11.5.0",
+    "@object-ui/core": "11.5.0",
+    "@object-ui/i18n": "11.5.0",
+    "@object-ui/providers": "11.5.0",
+    "@object-ui/react": "11.5.0",
+    "@object-ui/types": "11.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/FieldEditWidget.test.ts

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  FORM_FIELD_TYPES,
+  INLINE_EXCLUDED_FIELD_TYPES,
+  hasFieldEditWidget,
+} from './index';
+
+/**
+ * Drift-guard: the inline cell editor reuses the form's field widgets, but the
+ * two lists were hand-maintained separately and drifted — `lookup` (and other
+ * relational types) had a perfectly good form widget yet fell back to a plain
+ * text box inline, because nobody wired it up. This pins the contract: every
+ * type the FORM can render must have an explicit inline decision — an editor or
+ * a documented exclusion — so a new form widget can never again silently become
+ * an editable text box (or a missing one) in the grid.
+ */
+describe('inline editor ↔ form widget parity', () => {
+  it('every form field type either has an inline editor or is explicitly excluded', () => {
+    const undecided = FORM_FIELD_TYPES.filter(
+      (t) => !hasFieldEditWidget(t) && !INLINE_EXCLUDED_FIELD_TYPES.has(t),
+    );
+    // If this fails: a form widget type has no inline decision. Either add it to
+    // EDIT_WIDGETS (inline-editable) or to INLINE_EXCLUDED_FIELD_TYPES (with a
+    // reason) in FieldEditWidget.tsx.
+    expect(undecided).toEqual([]);
+  });
+
+  it('the exclusion set lists only real form types (no stale entries)', () => {
+    const known = new Set(FORM_FIELD_TYPES);
+    const stale = [...INLINE_EXCLUDED_FIELD_TYPES].filter((t) => !known.has(t));
+    expect(stale).toEqual([]);
+  });
+
+  it('relational fields use the standard picker inline (regression: lookup was a text box)', () => {
+    for (const t of ['lookup', 'master_detail', 'user', 'owner']) {
+      expect(hasFieldEditWidget(t)).toBe(true);
+    }
+  });
+
+  it('computed / binary form types are NOT inline-editable (excluded)', () => {
+    for (const t of ['formula', 'summary', 'auto_number', 'file', 'image']) {
+      expect(hasFieldEditWidget(t)).toBe(false);
+      expect(INLINE_EXCLUDED_FIELD_TYPES.has(t)).toBe(true);
+    }
+  });
+
+  it('structured-value types edit inline with their form widget (color/address/location/code/…)', () => {
+    for (const t of ['color', 'address', 'location', 'geolocation', 'code', 'qrcode']) {
+      expect(hasFieldEditWidget(t)).toBe(true);
+      expect(INLINE_EXCLUDED_FIELD_TYPES.has(t)).toBe(false);
+    }
+  });
+});

package/src/FieldEditWidget.tsx

@@ -31,6 +31,19 @@ import { TimeField } from './widgets/TimeField';
 import { EmailField } from './widgets/EmailField';
 import { PhoneField } from './widgets/PhoneField';
 import { UrlField } from './widgets/UrlField';
+// Relational pickers — the SAME standard widgets the form uses. They read the
+// related-object dataSource from SchemaRendererContext (which the grid already
+// provides), so they drop straight into an inline cell.
+import { LookupField } from './widgets/LookupField';
+import { UserField } from './widgets/UserField';
+// Structured-value editors — lightweight (no map/code-editor deps), same
+// widgets the form uses. Drop into a cell like the rest.
+import { ColorField } from './widgets/ColorField';
+import { AddressField } from './widgets/AddressField';
+import { LocationField } from './widgets/LocationField';
+import { GeolocationField } from './widgets/GeolocationField';
+import { CodeField } from './widgets/CodeField';
+import { QRCodeField } from './widgets/QRCodeField';
 
 /**
  * Field types that edit in place with a dedicated widget. Keyed by the raw
@@ -61,8 +74,40 @@ const EDIT_WIDGETS: Record<string, React.ComponentType<FieldWidgetProps<any>>> =
   email: EmailField,
   phone: PhoneField,
   url: UrlField,
+  // Relational — the record/user pickers, same as the form (the form maps
+  // master_detail to the single-value LookupField too, see fieldWidgetMap).
+  lookup: LookupField,
+  master_detail: LookupField,
+  user: UserField,
+  owner: UserField,
+  // Structured-value editors — same widgets the form uses.
+  color: ColorField,
+  address: AddressField,
+  location: LocationField,
+  geolocation: GeolocationField,
+  code: CodeField,
+  qrcode: QRCodeField,
 };
 
+/**
+ * Form field types that are deliberately NOT given an inline editor — every
+ * other form widget type must be in {@link EDIT_WIDGETS}. This pairing is
+ * enforced by a test against the form's widget map (`FORM_FIELD_TYPES`) so the
+ * two can't silently drift again (which is how `lookup` was missed). To add a
+ * type to inline editing, move it from here into EDIT_WIDGETS.
+ */
+export const INLINE_EXCLUDED_FIELD_TYPES = new Set<string>([
+  // Computed / read-only — the grid keeps these non-editable (no value to author).
+  'formula', 'summary', 'auto_number',
+  // Binary / attachment — edited from the record form, shown read-only in the grid.
+  'file', 'image', 'avatar', 'signature',
+  // Heavy / full editors — better in the record form than a cell.
+  'markdown', 'html', 'richtext', 'password',
+  // Containers / non-authorable — a sub-form / sub-grid / embedding vector
+  // doesn't belong in a single cell.
+  'object', 'grid', 'vector',
+]);
+
 /** Field types whose value is chosen in one discrete gesture (no free typing). */
 export const DISCRETE_EDIT_TYPES = new Set<string>([
   'boolean', 'toggle', 'select', 'status', 'radio', 'rating',
@@ -73,6 +118,15 @@ export function hasFieldEditWidget(type: string | undefined): boolean {
   return !!type && type in EDIT_WIDGETS;
 }
 
+/**
+ * Relational picker widgets (lookup / master_detail / user / owner) render best
+ * in a grid cell as a single-line, borderless trigger — so the selected
+ * record's NAME shows inside the trigger instead of a chip stacked above a
+ * separate "Select…" button (which double-stacks and wastes the row height).
+ * This mirrors how the line-item grid (`GridField`) renders its lookup cells.
+ */
+const COMPACT_EDIT_TYPES = new Set<string>(['lookup', 'master_detail', 'user', 'owner']);
+
 /**
  * Render the dedicated edit widget for a field's type — the SAME control the
  * form uses — as a controlled `{ value, onChange, field }` input. Returns
@@ -87,5 +141,6 @@ export function FieldEditWidget({
 }: FieldWidgetProps<any>): React.ReactElement | null {
   const Widget = field?.type ? EDIT_WIDGETS[field.type] : undefined;
   if (!Widget) return null;
-  return <Widget field={field} value={value} onChange={onChange} readonly={readonly} />;
+  const compactProps = field?.type && COMPACT_EDIT_TYPES.has(field.type) ? { compact: true } : {};
+  return <Widget field={field} value={value} onChange={onChange} readonly={readonly} {...(compactProps as any)} />;
 }

package/src/__tests__/DateCellRenderer.test.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DateCellRenderer, formatRelativeDate } from '../index';
+
+function daysAgo(n: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString();
+}
+
+describe('formatRelativeDate', () => {
+  it('renders "Overdue Nd" only when dueLike is set', () => {
+    expect(formatRelativeDate(daysAgo(3), { dueLike: true })).toBe('Overdue 3d');
+  });
+
+  it('renders neutral "Nd ago" for a past date that is not due-like', () => {
+    expect(formatRelativeDate(daysAgo(3))).toBe('3d ago');
+    expect(formatRelativeDate(daysAgo(3), { dueLike: false })).toBe('3d ago');
+  });
+});
+
+describe('DateCellRenderer', () => {
+  it('does not label a past start_date as "Overdue" (regression: field-role-agnostic formatter)', () => {
+    render(<DateCellRenderer value={daysAgo(6)} field={{ type: 'date', name: 'start_date' } as any} />);
+    expect(screen.getByText('6d ago')).toBeInTheDocument();
+    expect(screen.queryByText(/Overdue/)).not.toBeInTheDocument();
+  });
+
+  it('labels a past due_date as "Overdue Nd" and colors it red', () => {
+    render(<DateCellRenderer value={daysAgo(6)} field={{ type: 'date', name: 'due_date' } as any} />);
+    const el = screen.getByText('Overdue 6d');
+    expect(el).toBeInTheDocument();
+    expect(el.className).toMatch(/text-red-600/);
+  });
+
+  it('respects an explicit dueLike:true override regardless of field name', () => {
+    render(<DateCellRenderer value={daysAgo(2)} field={{ type: 'date', name: 'end_date', dueLike: true } as any} />);
+    expect(screen.getByText('Overdue 2d')).toBeInTheDocument();
+  });
+});

package/src/__tests__/NumberCellRenderer.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NumberCellRenderer } from '../index';
+
+const renderNumber = (value: unknown, field: Record<string, unknown> = {}) =>
+  render(<NumberCellRenderer value={value as any} field={{ type: 'number', ...field } as any} />);
+
+describe('NumberCellRenderer', () => {
+  it('does not pad trailing zeros using `precision` (total digits, not decimal places)', () => {
+    // Regression: a decimal(10, 0) column exposes precision: 10, which used to
+    // render `1` as "1.0000000000".
+    renderNumber(1, { precision: 10 });
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('renders an integer without decimals when no scale is declared', () => {
+    renderNumber(16);
+    expect(screen.getByText('16')).toBeInTheDocument();
+  });
+
+  it('preserves the value\'s natural decimals when no scale is declared', () => {
+    renderNumber(16.5);
+    expect(screen.getByText('16.5')).toBeInTheDocument();
+  });
+
+  it('pads to a fixed number of decimals when `scale` is declared', () => {
+    renderNumber(16, { scale: 2 });
+    expect(screen.getByText('16.00')).toBeInTheDocument();
+  });
+
+  it('honours a scale of 3 with zero padding', () => {
+    renderNumber(3.14, { scale: 3 });
+    expect(screen.getByText('3.140')).toBeInTheDocument();
+  });
+
+  it('rounds to the declared scale', () => {
+    renderNumber(3.14159, { scale: 2 });
+    expect(screen.getByText('3.14')).toBeInTheDocument();
+  });
+
+  it('treats scale: 0 as an integer display', () => {
+    renderNumber(2, { scale: 0 });
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('renders an empty indicator for nullish values', () => {
+    const { container } = renderNumber(null);
+    expect(container.textContent).not.toContain('0');
+  });
+});