@open-mercato/ui 0.9.1-develop.7499.1.fcec456e4e → 0.9.1-develop.7515.1.e2712c8b00

package/src/backend/CrudForm.tsx

@@ -92,7 +92,7 @@ import type { CustomFieldDefLike } from '@open-mercato/shared/modules/entities/v
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../primitives/dialog'
 import { FieldDefinitionsManager, type FieldDefinitionsManagerHandle } from './custom-fields/FieldDefinitionsManager'
 import { useConfirmDialog } from './confirm-dialog'
-import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from './injection/InjectionSpot'
+import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets, type LoadedInjectionSpotWidget } from './injection/InjectionSpot'
 import { dispatchBackendMutationError } from './injection/mutationEvents'
 import { VersionHistoryAction } from './version-history/VersionHistoryAction'
 import { parseBooleanWithDefault } from '@open-mercato/shared/lib/boolean'
@@ -105,7 +105,7 @@ import { SortableGroupHandleProvider, type SortableGroupHandleProps } from './cr
 import { useGroupOrder } from './crud/useGroupOrder'
 import { InjectedField } from './injection/InjectedField'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
-import { insertByInjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
+import { placeInjectedFieldsInGroups, type InjectedFieldWidgetPlacement } from './crud/injectedFieldGroups'
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { crudFormExtensionSpotId, extensionSpotChildId } from '@open-mercato/shared/modules/widgets/extension-points'
@@ -502,6 +502,26 @@ export type CrudFormGroup = {
   bare?: boolean
 }
 
+function renderNoInjectedFieldWidget(): null {
+  return null
+}
+
+async function skipInjectedFieldDeleteEvent(): Promise<void> {}
+
+// Field widgets persist values of the record being edited, so a delete must not fall
+// back to their save handlers the way it does for component widgets.
+const INJECTED_FIELD_DELETE_EVENT_DEFAULTS = {
+  onBeforeDelete: skipInjectedFieldDeleteEvent,
+  onDelete: skipInjectedFieldDeleteEvent,
+  onAfterDelete: skipInjectedFieldDeleteEvent,
+}
+
+function injectionWidgetPriority(widget: LoadedInjectionSpotWidget): number {
+  const placementPriority = widget.placement?.priority
+  if (typeof placementPriority === 'number') return placementPriority
+  return typeof widget.module.metadata.priority === 'number' ? widget.module.metadata.priority : 0
+}
+
 // Appends `legacy` entries not already present in `primary` (by `keyOf`), so a
 // `legacyInjectionSpotId` bridge never renders the same widget twice when it is
 // registered on both the primary and the legacy spot.
@@ -1239,7 +1259,30 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     [primaryFieldWidgets, legacyFieldWidgets],
   )
 
-  const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? '', injectionWidgets)
+  const injectionEventWidgets = React.useMemo<LoadedInjectionSpotWidget[]>(() => {
+    const fieldEventWidgets: LoadedInjectionSpotWidget[] = []
+    for (const widget of injectedFieldWidgets) {
+      if (!('fields' in widget) || !widget.eventHandlers) continue
+      fieldEventWidgets.push({
+        widgetId: widget.metadata.id,
+        module: {
+          metadata: widget.metadata,
+          eventHandlers: { ...INJECTED_FIELD_DELETE_EVENT_DEFAULTS, ...widget.eventHandlers },
+          Widget: renderNoInjectedFieldWidget,
+        },
+        moduleId: widget.moduleId,
+        key: widget.key,
+        placement: widget.placement,
+      })
+    }
+    if (!fieldEventWidgets.length) return injectionWidgets
+    return mergeByKey(injectionWidgets, fieldEventWidgets, (widget) => widget.widgetId)
+      .map((widget, index) => ({ widget, index }))
+      .sort((left, right) => injectionWidgetPriority(right.widget) - injectionWidgetPriority(left.widget) || left.index - right.index)
+      .map((entry) => entry.widget)
+  }, [injectionWidgets, injectedFieldWidgets])
+
+  const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? '', injectionEventWidgets)
   const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId)
 
   // Fields that active injection widgets declare as required (e.g. the SEO helper
@@ -1918,6 +1961,26 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     return definitions
   }, [injectedFieldWidgets])
 
+  const injectedFieldPlacements = React.useMemo(() => {
+    const placements = new Map<string, InjectedFieldWidgetPlacement | undefined>()
+    for (const widget of injectedFieldWidgets) {
+      if (!('fields' in widget)) continue
+      for (const field of widget.fields ?? []) {
+        placements.set((field as InjectionFieldDefinition).id, widget.placement)
+      }
+    }
+    return placements
+  }, [injectedFieldWidgets])
+
+  const groupsWithInjectedFields = React.useMemo(() => {
+    if (!groups || groups.length === 0 || injectedFieldDefinitions.length === 0) return groups
+    return placeInjectedFieldsInGroups(groups, injectedFieldDefinitions, injectedFieldPlacements, (definition) => {
+      if (process.env.NODE_ENV !== 'production') {
+        logger.warn('Injected field targets a group that does not exist; appended to the last plain-field group', { fieldId: definition.id, group: definition.group })
+      }
+    })
+  }, [groups, injectedFieldDefinitions, injectedFieldPlacements])
+
   const injectedFieldContext = React.useMemo<FieldContext>(() => {
     const recordValues = values as Record<string, unknown>
     const organizationId = typeof recordValues.organizationId === 'string' ? recordValues.organizationId : null
@@ -1974,27 +2037,15 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       }
       return (group.fields ?? []).map((entry) => (typeof entry === 'string' ? entry : entry.id))
     }
-    const declaredGroups = groups ?? []
     const hidden = new Set<string>()
     const visible = new Set<string>()
-    for (const group of declaredGroups) {
+    for (const group of groupsWithInjectedFields ?? []) {
       const target = hiddenGroupIdSet.has(group.id) ? hidden : visible
       for (const fieldId of groupFieldIds(group)) target.add(fieldId)
     }
-    // Mirror the injection fallback in `groupsWithInjectedFields`: a definition
-    // whose target group does not exist is appended to the last declared group,
-    // so it is hidden exactly when that fallback group is.
-    const declaredGroupIds = new Set(declaredGroups.map((group) => group.id))
-    const fallbackGroupId = declaredGroups[declaredGroups.length - 1]?.id
-    for (const definition of injectedFieldDefinitions) {
-      const targetGroupId = definition.group && declaredGroupIds.has(definition.group)
-        ? definition.group
-        : fallbackGroupId
-      if (targetGroupId && hiddenGroupIdSet.has(targetGroupId)) hidden.add(definition.id)
-    }
     for (const fieldId of visible) hidden.delete(fieldId)
     return hidden
-  }, [cfFields, groups, hiddenGroupIdSet, injectedFieldDefinitions, placedCustomFieldIds])
+  }, [cfFields, groupsWithInjectedFields, hiddenGroupIdSet, placedCustomFieldIds])
 
   const hiddenInjectedFieldIds = React.useMemo(() => {
     const hidden = new Set<string>()
@@ -2265,34 +2316,6 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     return pairs.map((p) => p.group)
   }, [injectionWidgets, injectionContext, pending, setValues, values])
   
-  const groupsWithInjectedFields = React.useMemo(() => {
-    if (!groups || groups.length === 0 || injectedFieldDefinitions.length === 0) return groups
-    const cloned = groups.map((group) => ({ ...group, fields: [...(group.fields ?? [])] }))
-    const fallbackIndex = cloned.length - 1
-    for (const definition of injectedFieldDefinitions) {
-      const targetIndex = cloned.findIndex((group) => group.id === definition.group)
-      const index = targetIndex >= 0 ? targetIndex : fallbackIndex
-      if (targetIndex < 0 && process.env.NODE_ENV !== 'production') {
-        logger.warn('Injected field targets a group that does not exist; appended to last group', { fieldId: definition.id, group: definition.group })
-      }
-      if (index < 0) continue
-      const fieldEntries = cloned[index].fields ?? []
-      const alreadyPresent = fieldEntries.some((entry) => {
-        const entryId = typeof entry === 'string' ? entry : entry.id
-        return entryId === definition.id
-      })
-      cloned[index].fields = alreadyPresent
-        ? fieldEntries
-        : insertByInjectionPlacement(
-            fieldEntries,
-            definition.id,
-            definition.placement,
-            (entry) => (typeof entry === 'string' ? entry : entry.id),
-          )
-    }
-    return cloned
-  }, [groups, injectedFieldDefinitions])
-
   const shouldAutoGroup = (!groupsWithInjectedFields || groupsWithInjectedFields.length === 0) && injectionGroupCards.length > 0
   const declaredGroupsForLayout = React.useMemo(() => {
     const baseGroups = groupsWithInjectedFields && groupsWithInjectedFields.length ? groupsWithInjectedFields : []

package/src/backend/DataTable.tsx

@@ -65,7 +65,7 @@ import type {
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useRegisteredComponent } from './injection/useRegisteredComponent'
 import { dataTableExtensionSpotId, extensionSpotChildId } from '@open-mercato/shared/modules/widgets/extension-points'
-import { insertByInjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
+import { insertByInjectionPlacement, InjectionPosition, type InjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type {
   FilterFieldDef as AdvancedFilterFieldDef,
@@ -170,6 +170,49 @@ export function withDataTableNamespaces<T extends Record<string, unknown>>(
   }
 }
 
+// Columns register in waves (injected columns and custom fields load asynchronously), so a
+// stored order rarely names every column. A column the order does not know yet takes its
+// place from the column definitions — right after its nearest known predecessor — instead
+// of being appended, which would discard an injected column's `placement` (#7083). One that
+// follows every known column is still appended, keeping the user's arrangement intact. An
+// injected column anchored `Before`/`After` a column already in the order follows that anchor
+// wherever the user moved it.
+function reconcileColumnOrder(
+  prev: string[],
+  ids: string[],
+  placements: ReadonlyMap<string, InjectionPlacement | undefined> = new Map(),
+): string[] {
+  const allowed = new Set(ids)
+  const result = prev.filter((id) => allowed.has(id))
+  const known = new Set(result)
+  ids.forEach((id, index) => {
+    if (known.has(id)) return
+    const placement = placements.get(id)
+    const anchorIndex = placement?.relativeTo ? result.indexOf(placement.relativeTo) : -1
+    if (anchorIndex !== -1 && (placement?.position === InjectionPosition.Before || placement?.position === InjectionPosition.After)) {
+      result.splice(placement.position === InjectionPosition.Before ? anchorIndex : anchorIndex + 1, 0, id)
+      known.add(id)
+      return
+    }
+    const hasKnownSuccessor = ids.slice(index + 1).some((candidate) => known.has(candidate))
+    if (!hasKnownSuccessor) {
+      result.push(id)
+    } else {
+      let insertAt = 0
+      for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+        const predecessorIndex = result.indexOf(ids[cursor])
+        if (predecessorIndex !== -1) {
+          insertAt = predecessorIndex + 1
+          break
+        }
+      }
+      result.splice(insertAt, 0, id)
+    }
+    known.add(id)
+  })
+  return result
+}
+
 function resolveDataTableRowId<T>(row: T, index: number): string {
   if (row && typeof row === 'object') {
     const candidate = (row as Record<string, unknown>).id
@@ -1921,23 +1964,20 @@ function DataTableImpl<T extends RowData>({
     [baseInjectionContext, hasInjectedBulkActions, rowSelection],
   )
   React.useEffect(() => {
-    const ids = table.getAllLeafColumns().map((column) => column.id)
+    // `getAllLeafColumns()` is already sorted by `columnOrder`, which would hide where a new
+    // column sits in the definitions; flattening `getAllColumns()` keeps definition order.
+    const ids = table.getAllColumns().flatMap((column) => column.getLeafColumns()).map((column) => column.id)
     if (!ids.length) return
+    const placements = new Map(
+      injectedColumnDefs.map(({ def, placement }) => [(def as { id?: string }).id ?? '', placement] as const),
+    )
     setColumnOrder((prev) => {
       if (!prev.length) return ids
-      const allowed = ids
-      const filtered = prev.filter((id) => allowed.includes(id))
-      const seen = new Set(filtered)
-      for (const id of allowed) {
-        if (!seen.has(id)) {
-          filtered.push(id)
-          seen.add(id)
-        }
-      }
-      const changed = filtered.length !== prev.length || filtered.some((id, index) => id !== prev[index])
-      return changed ? filtered : prev
+      const next = reconcileColumnOrder(prev, ids, placements)
+      const changed = next.length !== prev.length || next.some((id, index) => id !== prev[index])
+      return changed ? next : prev
     })
-  }, [table, mergedColumns])
+  }, [table, mergedColumns, injectedColumnDefs])
 
   // Auto-hiding is a per-column default, applied once per column — not an enforcement.
   // It cannot be latched by a single has-run boolean: columns arrive in waves, because

package/src/backend/__tests__/CrudForm.fieldInjection.test.tsx

@@ -4,7 +4,8 @@ jest.setTimeout(15000)
 // Injected field definitions for the CrudForm `:fields` injection spot. The
 // hook is mocked so the test drives `injectedFieldDefinitions` directly without
 // standing up the full injection registry/bootstrap. See issue #3047.
-let injectedFieldWidgets: Array<{ fields: unknown[] }> = []
+let injectedFieldWidgets: Array<Record<string, unknown> & { fields: unknown[] }> = []
+let capturedEventWidgets: Array<{ widgetId: string; module: { eventHandlers?: Record<string, unknown> } }> = []
 
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: () => {} }),
@@ -18,9 +19,10 @@ jest.mock('../injection/InjectionSpot', () => ({
   useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
   // Echo the payload so `transformFormData` is a no-op and submit assertions see
   // exactly what CrudForm forwards to the host `onSubmit`.
-  useInjectionSpotEvents: () => ({
-    triggerEvent: jest.fn(async (_event: string, data: unknown) => ({ ok: true, data })),
-  }),
+  useInjectionSpotEvents: (_spotId: string, widgets?: typeof capturedEventWidgets) => {
+    capturedEventWidgets = widgets ?? []
+    return { triggerEvent: jest.fn(async (_event: string, data: unknown) => ({ ok: true, data })) }
+  },
 }))
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   __esModule: true,
@@ -65,6 +67,7 @@ function orderedFieldIds(container: HTMLElement): string[] {
 describe('CrudForm group field injection (#3047)', () => {
   afterEach(() => {
     injectedFieldWidgets = []
+    capturedEventWidgets = []
   })
 
   it('honors placement when injecting a field into an existing group', async () => {
@@ -143,6 +146,84 @@ describe('CrudForm group field injection (#3047)', () => {
     )
     expect(labelMatches).toHaveLength(1)
   })
+
+  it('renders a group-kind injection targeting an undeclared group as its own card, even when the last group is customFields (#6142)', async () => {
+    const onBeforeSave = jest.fn(async () => ({ ok: true }))
+    injectedFieldWidgets = [
+      {
+        metadata: { id: 'wms.injection.catalog-inventory-profile' },
+        moduleId: 'wms',
+        key: 'wms:catalog-inventory-profile',
+        placement: { kind: 'group', column: 2, groupLabel: 'Inventory profile', groupDescription: 'Warehouse settings', priority: 120 },
+        fields: [
+          { id: 'wms.manageInventory', label: 'Manage inventory with WMS', type: 'boolean', group: 'wms.inventoryProfile' },
+          { id: 'wms.safetyStock', label: 'Safety stock', type: 'number', group: 'wms.inventoryProfile' },
+        ],
+        eventHandlers: { onBeforeSave },
+      },
+    ]
+
+    const { container, getByText } = renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product',
+        fields: baseFields,
+        groups: [
+          ...groups,
+          { id: 'custom', title: 'Custom attributes', column: 2, kind: 'customFields' },
+        ],
+        onSubmit: () => {},
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="wms.manageInventory"]')).toBeTruthy()
+    })
+    expect(container.querySelector('[data-crud-field-id="wms.safetyStock"]')).toBeTruthy()
+    expect(getByText('Inventory profile')).toBeTruthy()
+    expect(getByText('Warehouse settings')).toBeTruthy()
+    expect(orderedFieldIds(container).slice(0, 3)).toEqual(['firstName', 'lastName', 'email'])
+  })
+
+  it('dispatches injection events to field widgets that declare event handlers (#6142)', async () => {
+    const onBeforeSave = jest.fn(async () => ({ ok: true }))
+    injectedFieldWidgets = [
+      {
+        metadata: { id: 'wms.injection.catalog-inventory-profile' },
+        moduleId: 'wms',
+        key: 'wms:catalog-inventory-profile',
+        fields: [{ id: 'wms.manageInventory', label: 'Manage inventory with WMS', type: 'boolean', group: 'personalData' }],
+        eventHandlers: { onBeforeSave },
+      },
+      {
+        metadata: { id: 'example.injection.handlerless-field' },
+        moduleId: 'example',
+        key: 'example:handlerless-field',
+        fields: [{ id: 'example.note', label: 'Note', type: 'text', group: 'personalData' }],
+      },
+    ]
+
+    renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product',
+        fields: baseFields,
+        groups,
+        onSubmit: () => {},
+      }),
+    )
+
+    await waitFor(() => {
+      expect(capturedEventWidgets.map((widget) => widget.widgetId)).toEqual(['wms.injection.catalog-inventory-profile'])
+    })
+    const handlers = capturedEventWidgets[0].module.eventHandlers as Record<string, (...args: unknown[]) => unknown>
+    expect(handlers.onBeforeSave).toBe(onBeforeSave)
+    for (const deleteEvent of ['onBeforeDelete', 'onDelete', 'onAfterDelete']) {
+      expect(typeof handlers[deleteEvent]).toBe('function')
+      await handlers[deleteEvent]({})
+    }
+    expect(onBeforeSave).not.toHaveBeenCalled()
+  })
 })
 
 describe('CrudForm injected field id collisions', () => {

package/src/backend/__tests__/DataTable.injectedColumnPlacement.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { InjectionPosition, type InjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
+import { DataTable } from '../DataTable'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn(), refresh: jest.fn() }),
+}))
+
+const useInjectionDataWidgetsMock = jest.fn()
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: (spotId: string) => useInjectionDataWidgetsMock(spotId),
+}))
+
+jest.mock('@open-mercato/shared/modules/widgets/injection-loader', () => ({
+  getInjectionRegistryVersion: () => 0,
+  subscribeToInjectionRegistryChanges: () => () => {},
+  loadInjectionWidgetsForSpot: jest.fn(async () => []),
+  loadInjectionDataWidgetsForSpot: jest.fn(async () => []),
+}))
+
+type Row = { id: string; reference: string; status: string; amount: string }
+
+const ROWS: Row[] = [{ id: '1', reference: 'PAY-1', status: 'paid', amount: '10.00' }]
+
+const COLUMNS: ColumnDef<Row>[] = [
+  { id: 'reference', accessorKey: 'reference', header: 'Reference' },
+  { id: 'status', accessorKey: 'status', header: 'Status' },
+  { id: 'amount', accessorKey: 'amount', header: 'Amount' },
+]
+
+const TABLE_ID = 'tests.injected-placement'
+
+function mockInjectedColumn(placement: InjectionPlacement | undefined) {
+  useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+    if (spotId !== `data-table:${TABLE_ID}:columns`) return { widgets: [], isLoading: false, error: null }
+    return {
+      widgets: [
+        {
+          metadata: { id: 'tests.injected-placement.column' },
+          columns: [{ id: 'gateway_status', header: 'Gateway status', accessorKey: 'status', placement }],
+        },
+      ],
+      isLoading: false,
+      error: null,
+    }
+  })
+}
+
+function mockNoInjectedColumns() {
+  useInjectionDataWidgetsMock.mockImplementation(() => ({ widgets: [], isLoading: false, error: null }))
+}
+
+function Harness({ initialSettings }: { initialSettings?: unknown }) {
+  const queryClient = React.useMemo(
+    () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } }),
+    [],
+  )
+  return (
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider locale="en" dict={{}}>
+        <DataTable
+          columns={COLUMNS as never}
+          data={ROWS as never}
+          extensionTableId={TABLE_ID}
+          {...(initialSettings
+            ? ({ perspective: { tableId: TABLE_ID, initialState: { initialSettings } } } as never)
+            : {})}
+        />
+      </I18nProvider>
+    </QueryClientProvider>
+  )
+}
+
+function headerOrder(): string[] {
+  return screen.getAllByRole('columnheader').map((cell) => cell.textContent?.trim() ?? '').filter(Boolean)
+}
+
+async function renderWithLateInjectedColumn(placement: InjectionPlacement | undefined, initialSettings?: unknown) {
+  mockNoInjectedColumns()
+  const view = render(<Harness initialSettings={initialSettings} />)
+  await waitFor(() => expect(screen.getByText('Reference')).toBeTruthy())
+  mockInjectedColumn(placement)
+  view.rerender(<Harness initialSettings={initialSettings} />)
+  await waitFor(() => expect(screen.getByText('Gateway status')).toBeTruthy())
+}
+
+describe('DataTable — placement of injected columns that arrive after the first render (#7083)', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    for (const entry of document.cookie.split(';')) {
+      const name = entry.split('=')[0]?.trim()
+      if (name) document.cookie = `${name}=; Max-Age=0; Path=/`
+    }
+  })
+
+  it('renders an After-placed column right after its anchor', async () => {
+    await renderWithLateInjectedColumn({ position: InjectionPosition.After, relativeTo: 'status' })
+    await waitFor(() => expect(headerOrder()).toEqual(['Reference', 'Status', 'Gateway status', 'Amount']))
+  })
+
+  it('renders a Before-placed column right before its anchor', async () => {
+    await renderWithLateInjectedColumn({ position: InjectionPosition.Before, relativeTo: 'status' })
+    await waitFor(() => expect(headerOrder()).toEqual(['Reference', 'Gateway status', 'Status', 'Amount']))
+  })
+
+  it('renders a First-placed column first', async () => {
+    await renderWithLateInjectedColumn({ position: InjectionPosition.First })
+    await waitFor(() => expect(headerOrder()).toEqual(['Gateway status', 'Reference', 'Status', 'Amount']))
+  })
+
+  it('still appends a column with the default placement', async () => {
+    await renderWithLateInjectedColumn(undefined)
+    await waitFor(() => expect(headerOrder()).toEqual(['Reference', 'Status', 'Amount', 'Gateway status']))
+  })
+
+  it('keeps a stored column order and slots the late column next to its anchor', async () => {
+    await renderWithLateInjectedColumn(
+      { position: InjectionPosition.After, relativeTo: 'status' },
+      { columnOrder: ['amount', 'status', 'reference'] },
+    )
+    await waitFor(() => expect(headerOrder()).toEqual(['Amount', 'Status', 'Gateway status', 'Reference']))
+  })
+
+  it('follows a Before anchor that a stored column order moved', async () => {
+    await renderWithLateInjectedColumn(
+      { position: InjectionPosition.Before, relativeTo: 'status' },
+      { columnOrder: ['amount', 'status', 'reference'] },
+    )
+    await waitFor(() => expect(headerOrder()).toEqual(['Amount', 'Gateway status', 'Status', 'Reference']))
+  })
+
+  it('follows an After anchor on the last defined column that a stored column order moved', async () => {
+    await renderWithLateInjectedColumn(
+      { position: InjectionPosition.After, relativeTo: 'amount' },
+      { columnOrder: ['amount', 'status', 'reference'] },
+    )
+    await waitFor(() => expect(headerOrder()).toEqual(['Amount', 'Gateway status', 'Status', 'Reference']))
+  })
+})

package/src/backend/columns/ColumnChooserPanel.tsx

@@ -7,6 +7,7 @@ import { Switch } from '../../primitives/switch'
 import { Input } from '../../primitives/input'
 import { SearchInput } from '../../primitives/search-input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { UNGROUPED_GROUP_ID, resolveGroupLabel } from '../utils/groupLabels'
 import {
   DndContext,
   closestCenter,
@@ -131,13 +132,13 @@ export function ColumnChooserSection({
 
     const groups = new Map<string, ColumnChooserField[]>()
     for (const col of filtered) {
-      const group = col.group || t('ui.columnChooser.ungrouped', 'Other')
+      const group = col.group || UNGROUPED_GROUP_ID
       const list = groups.get(group) ?? []
       list.push(col)
       groups.set(group, list)
     }
     return groups
-  }, [availableColumns, searchQuery, visibleSet, t])
+  }, [availableColumns, searchQuery, visibleSet])
 
   const toggleGroup = React.useCallback((group: string) => {
     setExpandedGroups((prev) => {
@@ -227,7 +228,7 @@ export function ColumnChooserSection({
                   onClick={() => toggleGroup(group)}
                 >
                   <ChevronRight className={`size-4 transition-transform ${isCollapsed ? '' : 'rotate-90'}`} />
-                  <span>{group}</span>
+                  <span>{resolveGroupLabel(t, group, 'ui.columnChooser.ungrouped', 'Other')}</span>
                 </Button>
                 {!isCollapsed ? (
                   <div className="space-y-2 mt-2">

package/src/backend/columns/__tests__/ColumnChooserPanel.groupLabels.test.tsx

@@ -0,0 +1,72 @@
+// packages/ui/src/backend/columns/__tests__/ColumnChooserPanel.groupLabels.test.tsx
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import type { Locale } from '@open-mercato/shared/lib/i18n/config'
+import { ColumnChooserSection } from '../ColumnChooserPanel'
+import type { ColumnChooserField } from '../ColumnChooserPanel'
+
+const availableColumns: ColumnChooserField[] = [
+  { key: 'owner', label: 'Owner', group: 'customers.columnGroups.crm' },
+  { key: 'email', label: 'Email', group: 'Contact' },
+]
+
+function renderSection(locale: Locale, dict: Record<string, string>, columns = availableColumns) {
+  return render(
+    <I18nProvider locale={locale} dict={dict}>
+      <ColumnChooserSection
+        availableColumns={columns}
+        visibleColumnKeys={[]}
+        columnOrder={[]}
+        onToggleColumn={() => {}}
+        onReorderColumns={() => {}}
+      />
+    </I18nProvider>,
+  )
+}
+
+describe('ColumnChooserSection group labels', () => {
+  it('translates group labels a host registered in its locale file', () => {
+    renderSection('pl', { 'customers.columnGroups.crm': 'CRM PL' })
+    expect(screen.getByText('CRM PL')).toBeInTheDocument()
+    expect(screen.queryByText('customers.columnGroups.crm')).not.toBeInTheDocument()
+  })
+
+  it('renders unrecognized group strings verbatim', () => {
+    renderSection('pl', { 'customers.columnGroups.crm': 'CRM PL' })
+    expect(screen.getByText('Contact')).toBeInTheDocument()
+  })
+
+  it('falls back to the raw group label when no translation is registered', () => {
+    renderSection('en', {})
+    expect(screen.getByText('customers.columnGroups.crm')).toBeInTheDocument()
+    expect(screen.getByText('Contact')).toBeInTheDocument()
+  })
+
+  it('never resolves tenant-authored group titles as translation keys', () => {
+    renderSection('pl', { 'Deal pipeline': 'Lejek sprzedaży' }, [
+      { key: 'stage', label: 'Stage', group: 'Deal pipeline' },
+    ])
+    expect(screen.getByText('Deal pipeline')).toBeInTheDocument()
+    expect(screen.queryByText('Lejek sprzedaży')).not.toBeInTheDocument()
+  })
+
+  it('translates the ungrouped fallback for columns that declare no group', () => {
+    renderSection('pl', { 'ui.columnChooser.ungrouped': 'Pozostałe' }, [
+      { key: 'notes', label: 'Notes' },
+    ])
+    expect(screen.getByText('Pozostałe')).toBeInTheDocument()
+    expect(screen.queryByText('Other')).not.toBeInTheDocument()
+  })
+
+  it('keys grouping on the raw group string so two groups sharing a translation stay apart', () => {
+    renderSection('pl', {
+      'customers.columnGroups.crm': 'CRM',
+      'customers.columnGroups.pipeline': 'CRM',
+    }, [
+      { key: 'owner', label: 'Owner', group: 'customers.columnGroups.crm' },
+      { key: 'stage', label: 'Stage', group: 'customers.columnGroups.pipeline' },
+    ])
+    expect(screen.getAllByText('CRM')).toHaveLength(2)
+  })
+})