@object-ui/fields 11.3.0 → 11.5.0

package/src/__tests__/lookupCellReferenceKey.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * Regression: LookupCellRenderer must resolve a bare foreign-key id to a
+ * display name when the field metadata carries the ObjectStack `reference`
+ * key (as produced by `Field.lookup('...')` in @objectstack/spec) — not only
+ * the objectui `reference_to` alias.
+ *
+ * Real-world symptom (framework app-showcase): inline-edit a lookup cell, pick
+ * a record, click another row → the cell showed a muted "—" forever because
+ * the just-picked opaque id could not be resolved. Every other reader in the
+ * codebase (LookupField, UserField, DetailSection, RelatedList, …) already
+ * accepts `reference_to || reference`; this read cell used to read only
+ * `reference_to`.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+import { LookupCellRenderer } from '../index';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+// A ULID-style id: `isLikelyOpaqueId` returns true for it, so the OLD code
+// (which failed to resolve) would fall back to the muted "—" placeholder.
+const OPAQUE_ID = '01ARZ3NDEKTSV4RRFFQ69G5FAV';
+
+function makeDataSource() {
+  const findOne = vi.fn(async (object: string, id: string) => {
+    if (object === 'showcase_account' && id === OPAQUE_ID) {
+      return { id, name: 'Globex' };
+    }
+    return null;
+  });
+  return { findOne, find: vi.fn() } as any;
+}
+
+describe('LookupCellRenderer — reference key resolution', () => {
+  it('resolves an opaque id to a name via the `reference` key (not just reference_to)', async () => {
+    const ds = makeDataSource();
+    render(
+      <SchemaRendererProvider dataSource={ds}>
+        <LookupCellRenderer
+          value={OPAQUE_ID}
+          // ObjectStack convention: the lookup target lives under `reference`.
+          field={{ type: 'lookup', reference: 'showcase_account' } as any}
+        />
+      </SchemaRendererProvider>,
+    );
+
+    // The related record's display name must appear…
+    await waitFor(() => {
+      expect(screen.getByText('Globex')).toBeInTheDocument();
+    });
+    // …and the muted placeholder must NOT be what the user sees.
+    expect(screen.queryByText('—')).not.toBeInTheDocument();
+    expect(ds.findOne).toHaveBeenCalledWith('showcase_account', OPAQUE_ID);
+  });
+});

package/src/complex-widgets.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { LookupField } from './widgets/LookupField';
+import { ActionProvider } from '@object-ui/react';
+import { FieldEditWidget } from './FieldEditWidget';
 import { MasterDetailField } from './widgets/MasterDetailField';
 import { GridField } from './widgets/GridField';
 import { FileField } from './widgets/FileField';
@@ -343,6 +345,85 @@ describe('Complex & Relationship Widgets', () => {
             });
         });
 
+        it('defaults inline-create ON for a user-facing relation (no allow_create needed)', async () => {
+            // dynamicField.reference_to === 'customers' (user-facing) with NO
+            // allow_create flag → the capability is ON by default (standard).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            mockDataSource.create.mockResolvedValue({ id: 'new-2', name: 'Zeta' });
+            const onChange = vi.fn();
+
+            render(<LookupField {...dynamicProps} onChange={onChange} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Zeta' } }); });
+
+            expect(await screen.findByText('Create new "Zeta"')).toBeInTheDocument();
+            // No ActionProvider in scope → the create falls back to a direct
+            // dataSource.create (the modal-open path is exercised in the E2E).
+            await act(async () => { fireEvent.click(screen.getByText('Create new "Zeta"')); });
+            await waitFor(() => { expect(mockDataSource.create).toHaveBeenCalledWith('customers', { name: 'Zeta' }); });
+        });
+
+        it('does NOT default inline-create for a system / user-directory reference', async () => {
+            // A picker into the platform user directory must not offer "+ create"
+            // (those rows are org members, not inline-created from a field).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            const field = { ...dynamicField, reference_to: 'sys_user' } as any;
+
+            render(<LookupField {...dynamicProps} field={field} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Somebody' } }); });
+
+            await waitFor(() => { expect(screen.getByText('No options found')).toBeInTheDocument(); });
+            expect(screen.queryByText(/Create new/)).not.toBeInTheDocument();
+        });
+
+        it('honors an explicit allow_create:false opt-out on a user-facing relation', async () => {
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            const field = { ...dynamicField, allow_create: false } as any;
+
+            render(<LookupField {...dynamicProps} field={field} />);
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Nope' } }); });
+
+            await waitFor(() => { expect(screen.getByText('No options found')).toBeInTheDocument(); });
+            expect(screen.queryByText(/Create new/)).not.toBeInTheDocument();
+        });
+
+        it('under an ActionProvider, "+ create" opens the referenced object\'s create form (not a one-field create) and selects the result', async () => {
+            // The standard behaviour (founder ask): rather than blindly creating a
+            // record from the typed text, open the referenced object's OWN create
+            // form so the user fills every required field, then select what they
+            // made. Routed through the ActionProvider modal handler — the console
+            // wires one globally (ConsoleShell.GlobalCreateModalProvider).
+            mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+            mockDataSource.create.mockClear();
+            const onChange = vi.fn();
+            // Stand-in for the console's global create-modal host: resolves with
+            // the record the user created in the opened form.
+            const onModal = vi.fn(async (_schema: any) => ({ success: true, reload: true, data: { id: 'bk-1', name: 'Deep Sea Mechanics' } }));
+
+            render(
+                <ActionProvider onModal={onModal}>
+                    <LookupField {...dynamicProps} onChange={onChange} />
+                </ActionProvider>
+            );
+            await act(async () => { fireEvent.click(screen.getByRole('button', { name: /Select/i })); });
+            const input = await screen.findByRole('combobox');
+            await act(async () => { fireEvent.change(input, { target: { value: 'Deep Sea Mechanics' } }); });
+            await act(async () => { fireEvent.click(await screen.findByText('Create new "Deep Sea Mechanics"')); });
+
+            // It opened the referenced object's CREATE FORM (modal), addressed by
+            // object name + create mode — NOT a silent one-field dataSource.create.
+            await waitFor(() => { expect(onModal).toHaveBeenCalled(); });
+            expect(onModal.mock.calls[0][0]).toMatchObject({ objectName: 'customers', mode: 'create' });
+            expect(mockDataSource.create).not.toHaveBeenCalled();
+            // The record the user created in the form is selected back into the field.
+            await waitFor(() => { expect(onChange).toHaveBeenCalledWith('bk-1'); });
+        });
+
         it('shows a recently-used section on empty focus', async () => {
             localStorage.setItem('objectui:lookup:recent:customers', JSON.stringify(['r1']));
             mockDataSource.find.mockResolvedValue({ data: [{ id: 'a', name: 'Acme Corp' }], total: 1 });
@@ -532,6 +613,166 @@ describe('Complex & Relationship Widgets', () => {
         });
     });
 
+    describe('LookupField — expanded-reference ($expand) value resolution (#2125)', () => {
+        // The data grid requests `$expand` for visible reference columns, so a
+        // lookup cell's value arrives as the related record OBJECT ({ id, name }),
+        // not a bare id. The inline editor must resolve that to the record's name —
+        // like the read cell (LookupCellRenderer) — instead of the "Select…"
+        // placeholder. Regression test for #2125.
+        const mockDataSource = {
+            find: vi.fn(),
+            findOne: vi.fn(),
+            create: vi.fn(),
+            update: vi.fn(),
+            delete: vi.fn(),
+        };
+
+        beforeEach(() => {
+            vi.clearAllMocks();
+            try { localStorage.clear(); } catch { /* jsdom */ }
+        });
+
+        it('resolves an expanded-object value into the record name (compact trigger) without a bogus fetch', () => {
+            render(
+                <LookupField
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+
+            // The name resolves directly from the expanded object — shown in the
+            // compact trigger, never the placeholder.
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+
+            // Must never fetch by passing the whole object as an id.
+            expect(mockDataSource.findOne).not.toHaveBeenCalled();
+            expect(mockDataSource.find).not.toHaveBeenCalled();
+        });
+
+        it('resolves an expanded-object value in full (badge) mode', () => {
+            render(
+                <LookupField
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                />
+            );
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+        });
+
+        it('still hydrates a bare-id value via findOne (existing path preserved)', async () => {
+            mockDataSource.findOne.mockResolvedValue({ id: 'a1', name: 'Acme Corp' });
+            render(
+                <LookupField
+                    value="a1"
+                    onChange={vi.fn()}
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+            await waitFor(() => {
+                expect(mockDataSource.findOne).toHaveBeenCalledWith('showcase_account', 'a1');
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+            });
+        });
+
+        it('FieldEditWidget renders a lookup cell compact and resolves the expanded object', () => {
+            // Proves FieldEditWidget forwards `compact` to the relational widget, so
+            // the grid cell shows the record name in the trigger (single line).
+            render(
+                <FieldEditWidget
+                    field={{ name: 'account', type: 'lookup', reference: 'showcase_account' } as any}
+                    value={{ id: 'Z63', name: 'Northwind' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Northwind')).toBeInTheDocument();
+        });
+    });
+
+    describe('LookupField — inline value-shape alignment with the read cell', () => {
+        // Rounds out #2125: user/owner inline editing, JSON-encoded external-id
+        // reference values, and String()-tolerant id matching — so the inline
+        // editor resolves every value shape the read cell (LookupCellRenderer)
+        // does, instead of falling back to the "Select…" placeholder.
+        const mockDataSource = {
+            find: vi.fn(),
+            findOne: vi.fn(),
+            create: vi.fn(),
+            update: vi.fn(),
+            delete: vi.fn(),
+        };
+
+        beforeEach(() => {
+            vi.clearAllMocks();
+            try { localStorage.clear(); } catch { /* jsdom */ }
+        });
+
+        it('user field resolves an expanded-object value inline (via UserField → LookupField)', () => {
+            render(
+                <FieldEditWidget
+                    field={{ name: 'assignee', type: 'user' } as any}
+                    value={{ id: 'u1', name: 'Ada Lovelace' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
+        });
+
+        it('owner field resolves an expanded-object value inline', () => {
+            render(
+                <FieldEditWidget
+                    field={{ name: 'owner', type: 'owner' } as any}
+                    value={{ id: 'u2', name: 'Grace Hopper' }}
+                    onChange={vi.fn()}
+                />
+            );
+            expect(screen.getByText('Grace Hopper')).toBeInTheDocument();
+        });
+
+        it('resolves a JSON-encoded external-id reference string without a bogus fetch', () => {
+            render(
+                <LookupField
+                    value={'{"externalId":"Website Relaunch"}'}
+                    onChange={vi.fn()}
+                    field={{ name: 'project', type: 'lookup', reference: 'projects' } as any}
+                    readonly={false}
+                    dataSource={mockDataSource}
+                    compact
+                />
+            );
+            // The external id is used as the display label (mirrors the read cell).
+            expect(screen.getByText('Website Relaunch')).toBeInTheDocument();
+            // Never fetch by passing the raw JSON string as an id.
+            expect(mockDataSource.findOne).not.toHaveBeenCalled();
+            expect(mockDataSource.find).not.toHaveBeenCalled();
+        });
+
+        it('resolves a numeric cell value against a string-keyed option (tolerant match)', () => {
+            render(
+                <LookupField
+                    value={1}
+                    onChange={vi.fn()}
+                    field={{ name: 'category', type: 'lookup', options: [{ value: '1', label: 'One' }, { value: '2', label: 'Two' }] } as any}
+                    readonly={false}
+                    compact
+                />
+            );
+            // Strict === misses (number 1 vs string '1'); the loose fallback resolves it.
+            expect(screen.getByText('One')).toBeInTheDocument();
+        });
+    });
+
     describe('MasterDetailField', () => {
         const items = [
             { id: '1', label: 'Item 1' },

package/src/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry, percentDisplayValue } from '@object-ui/core';
 import { useLocalization } from '@object-ui/i18n';
-import { Badge, Avatar, AvatarFallback, Button, Checkbox, EmptyValue, cn } from '@object-ui/components';
+import { Badge, Avatar, AvatarImage, AvatarFallback, Button, Checkbox, EmptyValue, cn } from '@object-ui/components';
 import { Check, X, Copy, Phone as PhoneIcon, MapPin } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/react';
 import { SchemaRendererContext as _SchemaRendererContext } from '@object-ui/react';
@@ -362,8 +362,12 @@ export function humanizeLabel(value: string): string {
 
 /**
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
+ *
+ * `dueLike` gates the "Overdue" wording — a past `start_date`/`created_at`
+ * isn't overdue, only a past due/deadline-semantic field is. Non-due-like
+ * past dates render as "Nd ago" instead.
  */
-export function formatRelativeDate(value: string | Date | number): string {
+export function formatRelativeDate(value: string | Date | number, options?: { dueLike?: boolean }): string {
   if (value === null || value === undefined || value === '') return '—';
   const date = value instanceof Date ? value : new Date(value as any);
   if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
@@ -379,7 +383,7 @@ export function formatRelativeDate(value: string | Date | number): string {
   if (diffDays === -1) return 'Yesterday';
   if (diffDays < -1) {
     const absDays = Math.abs(diffDays);
-    if (absDays <= 7) return `Overdue ${absDays}d`;
+    if (absDays <= 7) return options?.dueLike ? `Overdue ${absDays}d` : `${absDays}d ago`;
     return formatDate(date);
   }
   if (diffDays > 1 && diffDays <= 7) return `In ${diffDays} days`;
@@ -389,7 +393,7 @@ export function formatRelativeDate(value: string | Date | number): string {
 /**
  * Format date value
  */
-export function formatDate(value: string | Date | number, style?: string): string {
+export function formatDate(value: string | Date | number, style?: string, options?: { dueLike?: boolean }): string {
   if (value === null || value === undefined || value === '') return '—';
   const date = value instanceof Date ? value : new Date(value as any);
   if (!(date instanceof Date) || isNaN(date.getTime())) return '—';
@@ -403,7 +407,7 @@ export function formatDate(value: string | Date | number, style?: string): strin
   }
 
   if (style === 'relative') {
-    return formatRelativeDate(date);
+    return formatRelativeDate(date, options);
   }
   
   // Default format: locale-aware human-readable. Drop the year when it
@@ -453,10 +457,21 @@ export function NumberCellRenderer({ value, field }: CellRendererProps): React.R
   
   const safe = coerceToSafeValue(value);
   const numField = field as any;
-  const precision = numField.precision ?? 0;
+  // Decimal places come from `scale` (the `s` in a `decimal(p, s)` column),
+  // NOT `precision` — `precision` is the TOTAL digit count (`p`), and reading
+  // it here padded every value out to that width (e.g. `1` from a
+  // decimal(10, 0) column rendered as "1.0000000000"). When `scale` is
+  // declared we pad to it so a fixed display is honoured (e.g. an amount with
+  // scale 2 → "16.00", a field with scale 3 → "3.140"); when it is absent we
+  // keep the minimum at 0 so trailing zeros are trimmed and only cap the
+  // maximum (20 = Intl max) to preserve the value's natural precision.
+  const scale = typeof numField.scale === 'number' ? numField.scale : undefined;
   const num = Number(safe);
   const formatted = !isNaN(num)
-    ? new Intl.NumberFormat('en-US', { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(num)
+    ? new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: scale ?? 0,
+        maximumFractionDigits: scale ?? 20,
+      }).format(num)
     : String(safe);
   
   return <span className="tabular-nums">{formatted}</span>;
@@ -586,19 +601,20 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
   const safe = coerceToSafeValue(value);
   const dateField = field as any;
   const style = dateField.format || 'relative';
-  const formatted = formatDate(safe as string | Date, style);
 
-  // Determine if date is overdue (in the past) — but only color it red when the
-  // field is *semantically* a due/deadline. A plain "start_date" or "created_at"
-  // in the past should not render in red.
-  const date = safe != null ? new Date(safe as string | number) : null;
-  const isValidDate = date !== null && !isNaN(date.getTime());
-  const startOfToday = new Date();
-  startOfToday.setHours(0, 0, 0, 0);
+  // A date is only *semantically* a due/deadline when the field says so — a
+  // plain "start_date" or "created_at" in the past is neither overdue text
+  // nor red, even though it renders in the same relative-time style.
   const fieldName = String(dateField?.name || dateField?.accessorKey || dateField?.key || '').toLowerCase();
   const dueLike =
     dateField?.dueLike === true ||
     /(^|_)(due|deadline|expires?|expiry|expiration|expected_close|target_close|sla|return_by|renewal|next_action)(_|$)/.test(fieldName);
+  const formatted = formatDate(safe as string | Date, style, { dueLike });
+
+  const date = safe != null ? new Date(safe as string | number) : null;
+  const isValidDate = date !== null && !isNaN(date.getTime());
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
   const isOverdue = dueLike && isValidDate && date! < startOfToday;
   const isoString = isValidDate ? date!.toISOString() : String(safe);
 
@@ -1152,7 +1168,14 @@ export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElem
  *    Falls back to a muted placeholder while pending and on failure.
  */
 export function LookupCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  const referenceTo = (field as { reference_to?: string }).reference_to;
+  // ObjectStack object metadata uses `reference` for the lookup target while the
+  // objectui types call it `reference_to`. Every other reader (LookupField,
+  // UserField, DetailSection, RelatedList, …) accepts both; this read cell must
+  // too, or a picked/opaque id never resolves to a name and the cell shows the
+  // muted "—" placeholder forever (e.g. after inline-editing a lookup).
+  const referenceTo =
+    (field as { reference_to?: string }).reference_to ||
+    (field as { reference?: string }).reference;
 
   // Pick the FIRST primitive id we see (for arrays, only the first one is auto-resolved
   // to keep the cell cheap; multi-value lookups should generally be expanded server-side).
@@ -1316,6 +1339,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
               className="size-8 border-2 border-white"
               title={name}
             >
+              {user.image && <AvatarImage src={user.image} alt={name} />}
               <AvatarFallback className="bg-blue-500 text-white text-xs">
                 {initials}
               </AvatarFallback>
@@ -1339,6 +1363,7 @@ export function UserCellRenderer({ value }: CellRendererProps): React.ReactEleme
   return (
     <div className="flex items-center gap-2">
       <Avatar className="size-8">
+        {value.image && <AvatarImage src={value.image} alt={name} />}
         <AvatarFallback className="bg-blue-500 text-white text-xs">
           {initials}
         </AvatarFallback>
@@ -1976,6 +2001,14 @@ const fieldWidgetMap: Record<string, () => Promise<{ default: React.ComponentTyp
   'qrcode': () => import('./widgets/QRCodeField').then(m => ({ default: m.QRCodeField })),
 };
 
+/**
+ * Every field type the form can render (the canonical list of supported types).
+ * Exported so inline editing can be checked against it — a form type must
+ * either have an inline editor or be explicitly excluded, see
+ * `INLINE_EXCLUDED_FIELD_TYPES` and its drift-guard test.
+ */
+export const FORM_FIELD_TYPES: readonly string[] = Object.freeze(Object.keys(fieldWidgetMap));
+
 /**
  * Register a specific field type lazily
  * @param fieldType - The field type to register (e.g., 'text', 'number')
@@ -2009,6 +2042,12 @@ const FIELD_TYPES_SKIP_FALLBACK = new Set([
   'slider',
   // Display renderer owned by `plugin-markdown:markdown`.
   'markdown',
+  // No other package owns the bare `time`/`address` key, but `registerField`
+  // wraps each call in a fresh `React.lazy(...)`, so re-registration (HMR,
+  // re-import) fails the registry's identity check every time and logs the
+  // same "bare-name fallback overwritten" warning at every boot regardless.
+  'time',
+  'address',
 ]);
 
 export function registerField(fieldType: string): void {
@@ -2065,7 +2104,10 @@ export function registerFields() {
   ComponentRegistry.register('select', createFieldRenderer(SelectField), { namespace: 'field', skipFallback: true });
   ComponentRegistry.register('date', createFieldRenderer(DateField), { namespace: 'field' });
   ComponentRegistry.register('datetime', createFieldRenderer(DateTimeField), { namespace: 'field' });
-  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field' });
+  // Namespaced-only: no other renderer legitimately owns the bare 'time' key,
+  // but the fallback still triggered noisy "bare-name overwritten" warnings on
+  // every re-registration (e.g. hot reload / re-init in a shared registry).
+  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field', skipFallback: true });
   
   // Contact fields - wrapped for documentation compatibility
   // `email` collides with the `ui:email` input variant; namespaced-only so the
@@ -2123,7 +2165,8 @@ export function registerFields() {
   ComponentRegistry.register('code', createFieldRenderer(CodeField), { namespace: 'field' });
   // `avatar` collides with the display avatar widget; namespaced-only.
   ComponentRegistry.register('avatar', createFieldRenderer(AvatarField), { namespace: 'field', skipFallback: true });
-  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field' });
+  // Namespaced-only — see the 'time' registration above for rationale.
+  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field', skipFallback: true });
   ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField), { namespace: 'field' });
   ComponentRegistry.register('signature', createFieldRenderer(SignatureField), { namespace: 'field' });
   ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField), { namespace: 'field' });

package/src/widgets/GridField.test.tsx

@@ -185,6 +185,20 @@ describe('GridField / LineItemsField — editable line items', () => {
     expect(onChange).toHaveBeenCalledWith([{ description: 'B', amount: 2 }]);
   });
 
+  it('row action buttons are always visible in grid mode (not hover-revealed)', () => {
+    render(
+      <GridField
+        value={[{ description: 'A', amount: 1 }]}
+        onChange={() => {}}
+        field={field}
+      />,
+    );
+    // Grid-mode rows previously gated these behind opacity-0/group-hover, so they
+    // were invisible until hover and unreachable on touch — they must always show.
+    expect(screen.getByLabelText('Remove row').className).not.toContain('opacity-0');
+    expect(screen.getByTestId('line-items-duplicate-0').className).not.toContain('opacity-0');
+  });
+
   it('readonly mode shows values and a summed total footer', () => {
     render(
       <GridField

package/src/widgets/GridField.tsx

@@ -857,10 +857,11 @@ export function GridField({
                               type="button"
                               variant="ghost"
                               size="icon"
-                              className={cn(
-                                'h-8 w-8 text-muted-foreground hover:text-foreground',
-                                !isList && 'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100',
-                              )}
+                              // Always visible (not hover-revealed): row actions must be
+                              // discoverable and reachable on touch/coarse-pointer devices,
+                              // which have no hover. The action column width is reserved
+                              // regardless, so this adds no layout shift.
+                              className="h-8 w-8 text-muted-foreground hover:text-foreground"
                               aria-label="Duplicate row"
                               title="Duplicate line"
                               data-testid={`line-items-duplicate-${rowIdx}`}
@@ -875,10 +876,8 @@ export function GridField({
                               type="button"
                               variant="ghost"
                               size="icon"
-                              className={cn(
-                                'h-8 w-8 text-muted-foreground hover:text-destructive',
-                                !isList && 'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100',
-                              )}
+                              // Always visible — see the duplicate button above.
+                              className="h-8 w-8 text-muted-foreground hover:text-destructive"
                               aria-label="Remove row"
                               data-testid={`line-items-remove-${rowIdx}`}
                               onClick={() => removeRow(rowIdx)}