@open-mercato/ui 0.6.7 → 0.6.8-develop.6874.1.982d6097d8

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

@@ -0,0 +1,98 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+// Regression guard for #4400: an injected group widget placed in column 1 must
+// render as a full-width row in the main stack — CrudForm must NOT switch to
+// the narrow 7fr/3fr secondary-column layout unless a widget explicitly asks
+// for column 2. The hook is mocked so the test drives the injected widgets
+// directly, following the CrudForm.fieldInjection.test.tsx pattern.
+let injectedGroupWidgets: unknown[] = []
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: injectedGroupWidgets, loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [
+  { id: 'name', label: 'Name', type: 'text' },
+]
+
+const groups: CrudFormGroup[] = [
+  { id: 'contact', label: 'Contact', fields: ['name'] },
+]
+
+function makeGroupWidget(column: 1 | 2) {
+  return {
+    widgetId: 'customer_accounts.injection.company-users',
+    placement: { kind: 'group', column, groupLabel: 'Portal users', priority: 200 },
+    module: {
+      metadata: { title: 'Portal users', description: '' },
+      Widget: () => <div data-testid="portal-users-widget">portal users</div>,
+    },
+  }
+}
+
+function renderForm() {
+  return renderWithProviders(
+    React.createElement(CrudForm as never, {
+      title: 'Company',
+      entityId: 'customers:company',
+      fields,
+      groups,
+      onSubmit: () => {},
+    }),
+  )
+}
+
+describe('CrudForm injected group column placement (#4400)', () => {
+  afterEach(() => {
+    injectedGroupWidgets = []
+  })
+
+  it('renders a column-1 group widget as a full-width row without the secondary column', async () => {
+    injectedGroupWidgets = [makeGroupWidget(1)]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="portal-users-widget"]')).toBeTruthy()
+    })
+
+    expect(container.querySelector('[data-crud-injection-region]')).toBeNull()
+    const twoColumnGrid = Array.from(container.querySelectorAll('div')).find((node) =>
+      node.className.includes('7fr_3fr'),
+    )
+    expect(twoColumnGrid).toBeUndefined()
+  })
+
+  it('still supports an explicit column-2 group widget via the secondary column (sanity)', async () => {
+    injectedGroupWidgets = [makeGroupWidget(2)]
+
+    const { container } = renderForm()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="portal-users-widget"]')).toBeTruthy()
+    })
+
+    const secondaryRegion = container.querySelector('[data-crud-injection-region]')
+    expect(secondaryRegion).toBeTruthy()
+    expect(secondaryRegion?.querySelector('[data-testid="portal-users-widget"]')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,105 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '../DataTable'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn(), refresh: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+jest.mock('@open-mercato/shared/modules/widgets/injection-loader', () => ({
+  getInjectionRegistryVersion: () => 0,
+  subscribeToInjectionRegistryChanges: () => () => {},
+  loadInjectionWidgetsForSpot: jest.fn(async () => []),
+  loadInjectionDataWidgetsForSpot: jest.fn(async () => []),
+}))
+
+type Row = { id: string; name: string }
+
+const ROWS: Row[] = [{ id: '1', name: 'Row one' }]
+
+const BASE_COLUMNS: ColumnDef<Row>[] = [
+  { accessorKey: 'name', header: 'Name' },
+]
+
+const COLUMNS_WITH_CUSTOM_FIELDS: ColumnDef<Row>[] = [
+  ...BASE_COLUMNS,
+  { accessorKey: 'cf_archived_note', header: 'Archived note', meta: { hidden: true } },
+  { accessorKey: 'cf_active_note', header: 'Active note' },
+]
+
+function Harness({ columns, initialSettings }: { columns: ColumnDef<Row>[]; 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}
+          {...(initialSettings
+            ? ({ perspective: { tableId: 'meta-hidden-late-columns', initialState: { initialSettings } } } as never)
+            : {})}
+        />
+      </I18nProvider>
+    </QueryClientProvider>
+  )
+}
+
+describe('DataTable — meta.hidden on columns that arrive after the first render', () => {
+  it('hides a meta.hidden column that only appears on a later render', async () => {
+    // The regression: the auto-hide pass used to be latched by a single boolean ref, so it
+    // ran on the first render — when no `cf_*` column existed yet — found nothing to hide,
+    // and never ran again. Custom fields declared `listVisible: false` stayed visible for
+    // the whole session after a hard page load, while a client-side navigation (definitions
+    // already in the query cache) rendered them correctly.
+    const { rerender } = render(<Harness columns={BASE_COLUMNS} />)
+    await waitFor(() => expect(screen.getByText('Name')).toBeTruthy())
+
+    rerender(<Harness columns={COLUMNS_WITH_CUSTOM_FIELDS} />)
+
+    await waitFor(() => expect(screen.queryByText('Archived note')).toBeNull())
+  })
+
+  it('leaves a late column without meta.hidden visible', async () => {
+    // Pins the other half of the contract, so the fix can never degrade into
+    // "columns that arrive late are dropped".
+    const { rerender } = render(<Harness columns={BASE_COLUMNS} />)
+    await waitFor(() => expect(screen.getByText('Name')).toBeTruthy())
+
+    rerender(<Harness columns={COLUMNS_WITH_CUSTOM_FIELDS} />)
+
+    await waitFor(() => expect(screen.getByText('Active note')).toBeTruthy())
+  })
+
+  it('hides a meta.hidden column that is present from the very first render', async () => {
+    // The behaviour the original latch was written for, which must survive the fix.
+    render(<Harness columns={COLUMNS_WITH_CUSTOM_FIELDS} />)
+
+    await waitFor(() => expect(screen.getByText('Active note')).toBeTruthy())
+    expect(screen.queryByText('Archived note')).toBeNull()
+  })
+
+  it('lets a stored perspective override the meta.hidden defaults', async () => {
+    // A saved perspective seeds columnVisibility at mount and wins outright.
+    render(
+      <Harness
+        columns={COLUMNS_WITH_CUSTOM_FIELDS}
+        initialSettings={{ columnVisibility: { cf_archived_note: true } }}
+      />,
+    )
+
+    await waitFor(() => expect(screen.getByText('Archived note')).toBeTruthy())
+  })
+})

package/src/backend/__tests__/DataTable.perspectiveStorage.test.ts

@@ -1,7 +1,8 @@
 /** @jest-environment jsdom */
-import { readPerspectiveSnapshot, writePerspectiveSnapshot } from '../DataTable'
+import { clearAllPerspectiveState, readPerspectiveSnapshot, writePerspectiveSnapshot } from '../DataTable'
 
 const PREFIX = 'om_table_perspective_snapshot'
+const COOKIE_PREFIX = 'om_table_perspective'
 
 describe('DataTable perspective snapshot storage (versioned envelope)', () => {
   beforeEach(() => {
@@ -52,3 +53,63 @@ describe('DataTable perspective snapshot storage (versioned envelope)', () => {
     expect(localStorage.getItem(`${PREFIX}:tbl5`)).toBeNull()
   })
 })
+
+describe('clearAllPerspectiveState (tenant-isolation at the auth identity boundary, #4185)', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    for (const cookie of document.cookie ? document.cookie.split(';') : []) {
+      const name = cookie.split('=')[0]?.trim()
+      if (name) document.cookie = `${name}=; Path=/; Max-Age=0`
+    }
+  })
+
+  it('removes every perspective snapshot across all tables', () => {
+    writePerspectiveSnapshot('customers-companies', {
+      perspectiveId: null,
+      settings: { columnSizing: { name: 210, status: 60 } },
+      updatedAt: 1,
+    })
+    writePerspectiveSnapshot('customers-people', {
+      perspectiveId: null,
+      settings: { columnSizing: { name: 300 } },
+      updatedAt: 2,
+    })
+
+    clearAllPerspectiveState()
+
+    expect(localStorage.getItem(`${PREFIX}:customers-companies`)).toBeNull()
+    expect(localStorage.getItem(`${PREFIX}:customers-people`)).toBeNull()
+    expect(readPerspectiveSnapshot('customers-companies')).toBeNull()
+    expect(readPerspectiveSnapshot('customers-people')).toBeNull()
+  })
+
+  it('leaves unrelated localStorage keys untouched', () => {
+    writePerspectiveSnapshot('customers-companies', {
+      perspectiveId: null,
+      settings: { columnSizing: { name: 210 } },
+      updatedAt: 1,
+    })
+    localStorage.setItem('om_login_tenant', 'acme')
+    localStorage.setItem('om:auth:identity', '123')
+
+    clearAllPerspectiveState()
+
+    expect(localStorage.getItem(`${PREFIX}:customers-companies`)).toBeNull()
+    expect(localStorage.getItem('om_login_tenant')).toBe('acme')
+    expect(localStorage.getItem('om:auth:identity')).toBe('123')
+  })
+
+  it('expires the active-view perspective cookies', () => {
+    document.cookie = `${COOKIE_PREFIX}:customers-companies=view-1; Path=/`
+    expect(document.cookie).toContain(`${COOKIE_PREFIX}:customers-companies=view-1`)
+
+    clearAllPerspectiveState()
+
+    expect(document.cookie).not.toContain(`${COOKIE_PREFIX}:customers-companies`)
+  })
+
+  it('is a no-op when nothing is stored', () => {
+    expect(() => clearAllPerspectiveState()).not.toThrow()
+    expect(localStorage.length).toBe(0)
+  })
+})

package/src/backend/__tests__/nav-utils.test.ts

@@ -202,4 +202,143 @@ describe('settings navigation helpers', () => {
     )
     expect(allSettingsHrefs).not.toContain('/backend/config/system-status')
   })
+
+  it('orders settings sections by the untranslated group id, not the rendered label', () => {
+    const polishEntry = (
+      group: string,
+      groupKey: string,
+      href: string,
+    ): AdminNavItem => ({
+      group,
+      groupId: groupKey,
+      groupKey,
+      groupDefaultName: group,
+      title: href,
+      defaultTitle: href,
+      href,
+      enabled: true,
+      order: 10,
+      pageContext: 'settings',
+    })
+
+    const entries: AdminNavItem[] = [
+      polishEntry('System', 'settings.sections.system', '/backend/config/system-status'),
+      polishEntry('Konfiguracja modułów', 'settings.sections.moduleConfigs', '/backend/config/wms'),
+      polishEntry('Autoryzacja', 'settings.sections.auth', '/backend/users'),
+    ]
+
+    const sections = buildSettingsSections(entries, {
+      'settings.sections.system': 1,
+      'settings.sections.auth': 2,
+      'settings.sections.moduleConfigs': 5,
+    })
+
+    expect(sections.map((section) => section.id)).toEqual([
+      'settings.sections.system',
+      'settings.sections.auth',
+      'settings.sections.moduleConfigs',
+    ])
+    expect(sections.map((section) => section.order)).toEqual([1, 2, 5])
+  })
+
+  it('keeps the section label and labelKey of the rendered group', () => {
+    const entries: AdminNavItem[] = [
+      {
+        group: 'Konfiguracja modułów',
+        groupId: 'settings.sections.moduleConfigs',
+        groupKey: 'settings.sections.moduleConfigs',
+        groupDefaultName: 'Konfiguracja modułów',
+        title: 'WMS',
+        defaultTitle: 'WMS',
+        href: '/backend/config/wms',
+        enabled: true,
+        pageContext: 'settings',
+      },
+    ]
+
+    const [section] = buildSettingsSections(entries, { 'settings.sections.moduleConfigs': 5 })
+
+    expect(section.label).toBe('Konfiguracja modułów')
+    expect(section.labelKey).toBe('settings.sections.moduleConfigs')
+  })
+
+  it('still honors legacy sectionOrder maps keyed by the English label slug', () => {
+    const entries: AdminNavItem[] = [
+      {
+        group: 'Module Configs',
+        groupId: 'settings.sections.moduleConfigs',
+        groupKey: 'settings.sections.moduleConfigs',
+        groupDefaultName: 'Module Configs',
+        title: 'WMS',
+        defaultTitle: 'WMS',
+        href: '/backend/config/wms',
+        enabled: true,
+        pageContext: 'settings',
+      },
+    ]
+
+    const [section] = buildSettingsSections(entries, { 'module-configs': 5 })
+
+    expect(section.order).toBe(5)
+  })
+
+  it('falls back to the catch-all weight for groups the order map does not name', () => {
+    const entries: AdminNavItem[] = [
+      {
+        group: 'Bezpieczeństwo',
+        groupId: 'settings.sections.security',
+        groupKey: 'settings.sections.security',
+        groupDefaultName: 'Bezpieczeństwo',
+        title: 'Audit Logs',
+        defaultTitle: 'Audit Logs',
+        href: '/backend/audit-logs',
+        enabled: true,
+        pageContext: 'settings',
+      },
+    ]
+
+    const [section] = buildSettingsSections(entries, { 'settings.sections.system': 1 })
+
+    expect(section.order).toBe(999)
+  })
+
+  // A partially translated locale renders `translate(groupKey, group)` as the localized label for
+  // pages whose key is covered and as the raw English fallback for the rest, so one group can reach
+  // buildSettingsSections under two different labels.
+  it('groups entries that share a group id even when labels differ', () => {
+    const entries: AdminNavItem[] = [
+      {
+        group: 'Konfiguracja modułów',
+        groupId: 'settings.sections.moduleConfigs',
+        groupKey: 'settings.sections.moduleConfigs',
+        groupDefaultName: 'Konfiguracja modułów',
+        title: 'WMS',
+        defaultTitle: 'WMS',
+        href: '/backend/config/wms',
+        enabled: true,
+        order: 20,
+        pageContext: 'settings',
+      },
+      {
+        group: 'Module Configs',
+        groupId: 'settings.sections.moduleConfigs',
+        groupKey: 'settings.sections.moduleConfigs',
+        groupDefaultName: 'Module Configs',
+        title: 'Sales',
+        defaultTitle: 'Sales',
+        href: '/backend/config/sales',
+        enabled: true,
+        order: 10,
+        pageContext: 'settings',
+      },
+    ]
+
+    const sections = buildSettingsSections(entries, { 'settings.sections.moduleConfigs': 5 })
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0].items.map((item) => item.href)).toEqual([
+      '/backend/config/sales',
+      '/backend/config/wms',
+    ])
+  })
 })

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -136,6 +136,21 @@ export function ConfirmDialog({
     return () => dialog.removeEventListener("cancel", handleCancel);
   }, [loading, requestClose]);
 
+  React.useEffect(() => {
+    if (!open) return;
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      if (!(event.target instanceof Node) || !dialogRef.current?.contains(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!loading) requestClose();
+    };
+
+    window.addEventListener("keydown", handleEscape, true);
+    return () => window.removeEventListener("keydown", handleEscape, true);
+  }, [loading, open, requestClose]);
+
   // Handle backdrop click
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     // Only close if clicking directly on the dialog (backdrop), not its children
@@ -262,7 +277,7 @@ export function ConfirmDialog({
           {resolvedConfirmText !== false && (
             <Button
               ref={confirmButtonRef}
-              variant={variant === "destructive" ? "destructive" : "default"}
+              variant={variant === "destructive" ? "destructive-solid" : "default"}
               onClick={handleConfirm}
               disabled={loading}
               className="w-full sm:w-auto"

package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import * as React from 'react'
-import { screen } from '@testing-library/react'
+import { fireEvent, screen, within } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { ConfirmDialog } from '../ConfirmDialog'
 
@@ -60,4 +60,71 @@ describe('ConfirmDialog', () => {
     expect(container.contains(dialog)).toBe(false)
     expect(dialog.parentElement).toBe(document.body)
   })
+
+  it('renders the destructive confirmation as the solid variant', () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        variant="destructive"
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Delete customer?"
+        confirmText="Delete"
+        cancelText="Cancel"
+      />,
+    )
+
+    const classNames = screen.getByRole('button', { name: 'Delete' }).className.split(/\s+/)
+    expect(classNames).toContain('bg-destructive')
+    expect(classNames).toContain('text-white')
+  })
+
+  it('keeps the default confirmation on the primary variant', () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Publish article?"
+        confirmText="Publish"
+        cancelText="Cancel"
+      />,
+    )
+
+    const classNames = screen.getByRole('button', { name: 'Publish' }).className.split(/\s+/)
+    expect(classNames).toContain('bg-primary')
+    expect(classNames).not.toContain('bg-destructive')
+  })
+
+  it('closes only the confirmation that owns an Escape event', () => {
+    const firstOpenChange = jest.fn()
+    const secondOpenChange = jest.fn()
+
+    renderWithProviders(
+      <>
+        <ConfirmDialog
+          open
+          onOpenChange={firstOpenChange}
+          onConfirm={() => undefined}
+          title="First confirmation"
+          confirmText="Confirm first"
+          cancelText="Cancel first"
+        />
+        <ConfirmDialog
+          open
+          onOpenChange={secondOpenChange}
+          onConfirm={() => undefined}
+          title="Second confirmation"
+          confirmText="Confirm second"
+          cancelText="Cancel second"
+        />
+      </>,
+    )
+
+    const secondDialog = screen.getByRole('alertdialog', { name: 'Second confirmation' })
+    fireEvent.keyDown(within(secondDialog).getByRole('button', { name: 'Cancel second' }), { key: 'Escape' })
+
+    expect(firstOpenChange).not.toHaveBeenCalled()
+    expect(secondOpenChange).toHaveBeenCalledWith(false)
+  })
 })

package/src/backend/crud/__tests__/useGroupOrder.test.ts

@@ -1,5 +1,6 @@
 /** @jest-environment jsdom */
-import { act, renderHook } from '@testing-library/react'
+import * as React from 'react'
+import { act, render, renderHook, screen } from '@testing-library/react'
 import { useGroupOrder } from '../useGroupOrder'
 
 describe('useGroupOrder', () => {
@@ -36,6 +37,16 @@ describe('useGroupOrder', () => {
     expect(result.current.orderedIds).toEqual(['a', 'd', 'b', 'c'])
   })
 
+  it('composes two reorder() calls made within a single commit', () => {
+    const { result } = renderHook(() => useGroupOrder('people', ['a', 'b', 'c']))
+    act(() => {
+      result.current.reorder(0, 2)
+      result.current.reorder(0, 1)
+    })
+    expect(result.current.orderedIds).toEqual(['c', 'b', 'a'])
+    expect(JSON.parse(localStorage.getItem('om:group-order:people')!)).toEqual(['c', 'b', 'a'])
+  })
+
   it('updates ordering when defaults change to include a new id', () => {
     const { result, rerender } = renderHook(
       ({ ids }) => useGroupOrder('p', ids),
@@ -60,4 +71,31 @@ describe('useGroupOrder', () => {
     expect(spy).not.toHaveBeenCalledWith('om:group-order:p', expect.anything())
     spy.mockRestore()
   })
+
+  it('keeps a stable orderedIds identity when defaults are recreated with equal content', () => {
+    const { result, rerender } = renderHook(
+      ({ ids }) => useGroupOrder('p', ids),
+      { initialProps: { ids: ['a', 'b'] } },
+    )
+    const first = result.current.orderedIds
+    rerender({ ids: ['a', 'b'] })
+    expect(result.current.orderedIds).toBe(first)
+  })
+
+  it('does not loop when the host recreates defaults with different content on every render (#4386)', () => {
+    localStorage.setItem('om:group-order:unstable', JSON.stringify(['b', 'a']))
+    let renders = 0
+    function UnstableHost() {
+      renders += 1
+      if (renders > 50) throw new Error('render loop detected')
+      const defaults = renders % 2 === 1 ? ['a', 'b'] : ['a', 'b', `extra-${renders}`]
+      const { orderedIds } = useGroupOrder('unstable', defaults)
+      return React.createElement('div', { 'data-testid': 'order' }, orderedIds.join(','))
+    }
+
+    render(React.createElement(UnstableHost))
+
+    expect(renders).toBeLessThanOrEqual(6)
+    expect(screen.getByTestId('order').textContent).toContain('b,a')
+  })
 })

package/src/backend/crud/useGroupOrder.ts

@@ -31,41 +31,46 @@ function arraysEqual(a: string[], b: string[]): boolean {
 /**
  * Returns the group IDs in the user's preferred order.
  * Falls back to the default order when no preference is stored.
+ *
+ * State holds only the saved preference; the visible order is derived during
+ * render. Syncing derived order back into state via an effect looped forever
+ * when a host recreated `defaultGroupIds` with different content on every
+ * render (#4386), so no effect writes state from `defaultGroupIds` here.
+ *
+ * `stableIdsRef` is mutated during render, which React's render-purity rule
+ * normally forbids. It is safe here because the guard swaps the reference only
+ * when the *content* differs: a concurrent render that React discards can leave
+ * behind a different array identity, but never a content-stale value, and the
+ * render that commits always leaves `stableIdsRef.current` content-equal to its
+ * own `mergedIds`. `reorder` advances the same ref from its event handler so
+ * that several reorders within one commit compose instead of overwriting each
+ * other; a discarded state update leaves the ref ahead of `savedOrder` only
+ * until the next render's content guard pulls it back (#4691).
  */
 export function useGroupOrder(pageType: string, defaultGroupIds: string[]) {
-  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)
-  const mounted = React.useRef(false)
+  const [savedOrder, setSavedOrder] = React.useState<string[] | null>(null)
 
   React.useEffect(() => {
-    mounted.current = true
     const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)
-    if (Array.isArray(saved)) {
-      setOrderedIds(mergeOrder(saved, defaultGroupIds))
-    }
-    // Intentionally only runs on mount (per pageType); defaultGroupIds changes are
-    // handled by the sync effect below.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setSavedOrder(Array.isArray(saved) ? saved : null)
   }, [pageType])
 
-  // Sync when defaultGroupIds changes (e.g. new groups added dynamically)
-  React.useEffect(() => {
-    setOrderedIds((prev) => {
-      const merged = mergeOrder(prev, defaultGroupIds)
-      return arraysEqual(prev, merged) ? prev : merged
-    })
-  }, [defaultGroupIds])
+  const mergedIds = savedOrder ? mergeOrder(savedOrder, defaultGroupIds) : defaultGroupIds
+
+  const stableIdsRef = React.useRef(mergedIds)
+  if (!arraysEqual(stableIdsRef.current, mergedIds)) {
+    stableIdsRef.current = mergedIds
+  }
+  const orderedIds = stableIdsRef.current
 
   const reorder = React.useCallback(
     (fromIndex: number, toIndex: number) => {
-      setOrderedIds((prev) => {
-        const next = [...prev]
-        const [moved] = next.splice(fromIndex, 1)
-        next.splice(toIndex, 0, moved)
-        if (mounted.current) {
-          writeJsonToLocalStorage(getStorageKey(pageType), next)
-        }
-        return next
-      })
+      const next = [...stableIdsRef.current]
+      const [moved] = next.splice(fromIndex, 1)
+      next.splice(toIndex, 0, moved)
+      stableIdsRef.current = next
+      writeJsonToLocalStorage(getStorageKey(pageType), next)
+      setSavedOrder(next)
     },
     [pageType],
   )

package/src/backend/custom-fields/FieldDefinitionsManager.tsx

@@ -355,7 +355,7 @@ export const FieldDefinitionsManager = React.forwardRef<FieldDefinitionsManagerH
     return (
       <div className="flex flex-col gap-3 sm:gap-4">
         {statusError ? (
-          <Alert variant="destructive">
+          <Alert status="error">
             <AlertTitle>{t('entities.customFields.errors.title', 'Something went wrong')}</AlertTitle>
             <AlertDescription>{statusError}</AlertDescription>
           </Alert>