@open-mercato/ui 0.6.7-develop.6860.1.f796b22e80 → 0.6.7

package/src/backend/__tests__/BackendChromeProvider.test.tsx

@@ -3,14 +3,8 @@
  */
 
 import * as React from 'react'
-import { act, render, screen, waitFor } from '@testing-library/react'
-import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
-import type { BackendChromePayload } from '@open-mercato/shared/modules/navigation/backendChrome'
-import {
-  BackendChromeProvider,
-  useBackendChrome,
-  useCurrentOrganization,
-} from '../BackendChromeProvider'
+import { render, screen, waitFor } from '@testing-library/react'
+import { BackendChromeProvider, useBackendChrome } from '../BackendChromeProvider'
 import { apiCall } from '../utils/apiCall'
 
 jest.mock('../utils/apiCall', () => ({
@@ -27,30 +21,6 @@ function ChromeStateProbe() {
   )
 }
 
-function CurrentOrganizationProbe() {
-  const organization = useCurrentOrganization()
-  return (
-    <span data-testid="current-organization">
-      {organization ? `${organization.id}:${organization.name}` : 'none'}
-    </span>
-  )
-}
-
-function makePayload(
-  currentOrganization: BackendChromePayload['currentOrganization'],
-): BackendChromePayload {
-  return {
-    groups: [],
-    settingsSections: [],
-    settingsPathPrefixes: [],
-    profileSections: [],
-    profilePathPrefixes: [],
-    grantedFeatures: [],
-    roles: [],
-    currentOrganization,
-  }
-}
-
 describe('BackendChromeProvider', () => {
   beforeEach(() => {
     ;(apiCall as jest.Mock).mockReset()
@@ -72,70 +42,4 @@ describe('BackendChromeProvider', () => {
     expect(screen.getByTestId('ready')).toHaveTextContent('not-ready')
     expect(apiCall).toHaveBeenCalledWith('/api/auth/admin/nav', { credentials: 'include' })
   })
-
-  it('returns null outside a provider', () => {
-    render(<CurrentOrganizationProbe />)
-
-    expect(screen.getByTestId('current-organization')).toHaveTextContent('none')
-  })
-
-  it('returns null before the chrome payload arrives', () => {
-    ;(apiCall as jest.Mock).mockReturnValue(new Promise(() => {}))
-
-    render(
-      <BackendChromeProvider adminNavApi="/api/auth/admin/nav?test=pending">
-        <CurrentOrganizationProbe />
-      </BackendChromeProvider>,
-    )
-
-    expect(screen.getByTestId('current-organization')).toHaveTextContent('none')
-  })
-
-  it('returns the organization from the hydrated payload', async () => {
-    ;(apiCall as jest.Mock).mockResolvedValue({
-      ok: true,
-      result: makePayload({ id: 'org-1', name: 'Northwind Ltd' }),
-    })
-
-    render(
-      <BackendChromeProvider adminNavApi="/api/auth/admin/nav?test=hydrated">
-        <CurrentOrganizationProbe />
-      </BackendChromeProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByTestId('current-organization')).toHaveTextContent('org-1:Northwind Ltd')
-    })
-  })
-
-  it('refreshes the organization after the active scope changes', async () => {
-    ;(apiCall as jest.Mock)
-      .mockResolvedValueOnce({
-        ok: true,
-        result: makePayload({ id: 'org-1', name: 'Northwind Ltd' }),
-      })
-      .mockResolvedValueOnce({
-        ok: true,
-        result: makePayload({ id: 'org-2', name: 'Contoso GmbH' }),
-      })
-
-    render(
-      <BackendChromeProvider adminNavApi="/api/auth/admin/nav?test=scope-refresh">
-        <CurrentOrganizationProbe />
-      </BackendChromeProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByTestId('current-organization')).toHaveTextContent('org-1:Northwind Ltd')
-    })
-
-    act(() => {
-      emitOrganizationScopeChanged({ organizationId: 'org-2', tenantId: 'tenant-1' })
-    })
-
-    await waitFor(() => {
-      expect(screen.getByTestId('current-organization')).toHaveTextContent('org-2:Contoso GmbH')
-    })
-    expect(apiCall).toHaveBeenCalledTimes(2)
-  })
 })

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

@@ -1,8 +1,7 @@
 /** @jest-environment jsdom */
-import { clearAllPerspectiveState, readPerspectiveSnapshot, writePerspectiveSnapshot } from '../DataTable'
+import { readPerspectiveSnapshot, writePerspectiveSnapshot } from '../DataTable'
 
 const PREFIX = 'om_table_perspective_snapshot'
-const COOKIE_PREFIX = 'om_table_perspective'
 
 describe('DataTable perspective snapshot storage (versioned envelope)', () => {
   beforeEach(() => {
@@ -53,63 +52,3 @@ 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,143 +202,4 @@ 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,21 +136,6 @@ 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
@@ -277,7 +262,7 @@ export function ConfirmDialog({
           {resolvedConfirmText !== false && (
             <Button
               ref={confirmButtonRef}
-              variant={variant === "destructive" ? "destructive-solid" : "default"}
+              variant={variant === "destructive" ? "destructive" : "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 { fireEvent, screen, within } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { ConfirmDialog } from '../ConfirmDialog'
 
@@ -60,71 +60,4 @@ 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,6 +1,5 @@
 /** @jest-environment jsdom */
-import * as React from 'react'
-import { act, render, renderHook, screen } from '@testing-library/react'
+import { act, renderHook } from '@testing-library/react'
 import { useGroupOrder } from '../useGroupOrder'
 
 describe('useGroupOrder', () => {
@@ -37,16 +36,6 @@ 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),
@@ -71,31 +60,4 @@ 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,46 +31,41 @@ 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 [savedOrder, setSavedOrder] = React.useState<string[] | null>(null)
+  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)
+  const mounted = React.useRef(false)
 
   React.useEffect(() => {
+    mounted.current = true
     const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)
-    setSavedOrder(Array.isArray(saved) ? saved : 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
   }, [pageType])
 
-  const mergedIds = savedOrder ? mergeOrder(savedOrder, defaultGroupIds) : defaultGroupIds
-
-  const stableIdsRef = React.useRef(mergedIds)
-  if (!arraysEqual(stableIdsRef.current, mergedIds)) {
-    stableIdsRef.current = mergedIds
-  }
-  const orderedIds = stableIdsRef.current
+  // 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 reorder = React.useCallback(
     (fromIndex: number, toIndex: number) => {
-      const next = [...stableIdsRef.current]
-      const [moved] = next.splice(fromIndex, 1)
-      next.splice(toIndex, 0, moved)
-      stableIdsRef.current = next
-      writeJsonToLocalStorage(getStorageKey(pageType), next)
-      setSavedOrder(next)
+      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
+      })
     },
     [pageType],
   )

package/src/backend/detail/AddressTiles.tsx

@@ -7,7 +7,7 @@ import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { TabEmptyState } from '@open-mercato/ui/backend/detail'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { normalizeCoordinateInput, validateCoordinateInput } from '@open-mercato/shared/lib/location/coordinates'
-import { AddressView, type AddressFormatStrategy } from './addressFormat'
+import { AddressView, formatAddressString, type AddressFormatStrategy } from './addressFormat'
 import AddressEditor, { type AddressTypesAdapter } from './AddressEditor'
 import {
   Dialog,
@@ -176,7 +176,7 @@ export function AddressTiles<C = unknown>({
   t,
   emptyLabel,
   isSubmitting = false,
-  gridClassName = 'grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-2 sm:gap-4',
+  gridClassName = 'grid grid-cols-1 gap-2 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4',
   hideAddButton = false,
   onAddActionChange,
   emptyStateTitle,
@@ -480,7 +480,7 @@ export function AddressTiles<C = unknown>({
             addressTypesAdapter={addressTypesAdapter}
             addressTypesContext={addressTypesContext}
           />
-          {generalError ? <p className="text-xs text-status-error-text">{generalError}</p> : null}
+          {generalError ? <p className="text-xs text-red-600">{generalError}</p> : null}
           <div className="flex flex-wrap justify-end gap-2">
             <Button type="button" variant="outline" onClick={handleCancel} disabled={disableActions}>
               {label('cancel', 'Cancel')}
@@ -569,6 +569,9 @@ export function AddressTiles<C = unknown>({
                       </p>
                     ) : null}
                     <AddressView address={address} format={format} className="text-sm text-foreground" />
+                    <p className="text-xs text-muted-foreground">
+                      {formatAddressString(address, format)}
+                    </p>
                   </div>
                   <div className="flex items-center gap-1 opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100 focus-within:opacity-100">
                     <Button

package/src/backend/detail/AttachmentDeleteDialog.tsx

@@ -38,7 +38,7 @@ export function AttachmentDeleteDialog({ open, onOpenChange, fileName, onConfirm
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isDeleting}>
             {t('attachments.library.metadata.cancel', 'Cancel')}
           </Button>
-          <Button type="button" variant="destructive-solid" onClick={onConfirm} disabled={isDeleting}>
+          <Button type="button" variant="destructive" onClick={onConfirm} disabled={isDeleting}>
             {t('attachments.library.actions.delete', 'Delete')}
           </Button>
         </DialogFooter>

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -77,7 +77,7 @@ type AttachmentMetadataFormValues = {
   assignments?: AssignmentDraft[]
 } & Record<string, unknown>
 
-export type AssignmentEditorLabels = {
+type AssignmentEditorLabels = {
   title: string
   description: string
   type: string

package/src/backend/detail/AttachmentsSection.tsx

@@ -256,7 +256,7 @@ function AttachmentsSectionImpl({
         </div>
       )}
 
-      {error ? <p className="text-xs font-medium text-status-error-text">{error}</p> : null}
+      {error ? <p className="text-xs font-medium text-red-600">{error}</p> : null}
 
       {loading ? (
         <div className="text-sm text-muted-foreground">{t('attachments.library.loading', 'Loading attachments…')}</div>

package/src/backend/detail/NotesSection.tsx

@@ -1256,7 +1256,7 @@ function NotesSectionImpl<C = unknown>({
                       editorWrapperClassName="w-full rounded-md border border-muted-foreground/20 bg-background p-2"
                       remarkPlugins={markdownPlugins}
                     />
-                    {contentError ? <p className="text-xs text-status-error-text">{contentError}</p> : null}
+                    {contentError ? <p className="text-xs text-red-600">{contentError}</p> : null}
                     <div className="flex flex-wrap items-center gap-2">
                       <Button type="button" size="sm" onClick={handleContentSave} disabled={contentSavingId === note.id}>
                         {contentSavingId === note.id ? (

package/src/backend/detail/TagsSection.tsx

@@ -387,7 +387,7 @@ function TagsSectionImpl({
                 loadSuggestions={loadSuggestions}
                 autoFocus={!autoSave}
               />
-              {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+              {error ? <p className="text-xs text-red-600">{error}</p> : null}
               {autoSave ? null : (
                 <div className="flex items-center gap-2 mt-3 mb-2">
                   <Button type="button" size="sm" onClick={handleSave} disabled={saving || isSubmitting}>