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

package/src/backend/dashboard/DashboardScreen.tsx

@@ -357,7 +357,7 @@ export function DashboardScreen() {
 
   if (error && layout.length === 0) {
     return (
-      <Alert variant="destructive">
+      <Alert status="error">
         <AlertTitle>{t('dashboard.unavailable')}</AlertTitle>
         <AlertDescription>{error}</AlertDescription>
         <div className="mt-2"><Button variant="outline" onClick={handleRefresh}>{t('dashboard.retry')}</Button></div>
@@ -367,7 +367,7 @@ export function DashboardScreen() {
 
   if (!hasRegisteredWidgets && layout.length === 0) {
     return (
-      <Alert variant="info">
+      <Alert status="information">
         <AlertTitle>{t('dashboard.empty.noWidgets.title', 'No dashboard widgets yet')}</AlertTitle>
         <AlertDescription>
           {t(
@@ -403,7 +403,7 @@ export function DashboardScreen() {
       </div>
 
       {error && layout.length > 0 && (
-        <Alert variant="destructive">
+        <Alert status="error">
           <AlertTitle>{t('dashboard.error.partial')}</AlertTitle>
           <AlertDescription>{error}</AlertDescription>
           <div className="mt-2"><Button variant="ghost" onClick={handleRefresh}>{t('dashboard.error.reload')}</Button></div>

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, formatAddressString, type AddressFormatStrategy } from './addressFormat'
+import { AddressView, 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-1 gap-2 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4',
+  gridClassName = 'grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-2 sm:gap-4',
   hideAddButton = false,
   onAddActionChange,
   emptyStateTitle,
@@ -480,7 +480,7 @@ export function AddressTiles<C = unknown>({
             addressTypesAdapter={addressTypesAdapter}
             addressTypesContext={addressTypesContext}
           />
-          {generalError ? <p className="text-xs text-red-600">{generalError}</p> : null}
+          {generalError ? <p className="text-xs text-status-error-text">{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,9 +569,6 @@ 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" onClick={onConfirm} disabled={isDeleting}>
+          <Button type="button" variant="destructive-solid" 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>
 
-type AssignmentEditorLabels = {
+export 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-red-600">{error}</p> : null}
+      {error ? <p className="text-xs font-medium text-status-error-text">{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-red-600">{contentError}</p> : null}
+                    {contentError ? <p className="text-xs text-status-error-text">{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-red-600">{error}</p> : null}
+              {error ? <p className="text-xs text-status-error-text">{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}>

package/src/backend/detail/__tests__/AttachmentAssignmentsEditor.test.tsx

@@ -75,4 +75,25 @@ describe('AttachmentAssignmentsEditor (metadata dialog)', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Remove assignment' }))
     expect(screen.queryByPlaceholderText('catalog.product')).toBeNull()
   })
+
+  it('keeps the surviving assignment values after removing a middle row', () => {
+    render(
+      <EditorHarness
+        initial={[
+          { type: 'catalog.product', id: 'p-1', href: '', label: '' },
+          { type: 'sales.order', id: 'o-2', href: '', label: '' },
+          { type: 'customers.person', id: 'c-3', href: '', label: '' },
+        ]}
+      />,
+    )
+
+    fireEvent.click(screen.getAllByRole('button', { name: labels.remove })[1])
+
+    const typeInputs = screen.getAllByPlaceholderText('catalog.product') as HTMLInputElement[]
+    const idInputs = screen.getAllByPlaceholderText('Record ID') as HTMLInputElement[]
+    expect(typeInputs[0]).toHaveValue('catalog.product')
+    expect(idInputs[0]).toHaveValue('p-1')
+    expect(typeInputs[1]).toHaveValue('customers.person')
+    expect(idInputs[1]).toHaveValue('c-3')
+  })
 })

package/src/backend/filters/AdvancedFilterPanel.tsx

@@ -444,7 +444,7 @@ export function AdvancedFilterPanel(props: AdvancedFilterPanelProps) {
           )}
           {props.pendingErrors.length > 0 ? (
             <div className="p-3 border-t border-border" data-testid="filter-validation-banner">
-              <Alert variant="destructive">
+              <Alert status="error">
                 <AlertDescription>
                   {props.pendingErrors.length === 1
                     ? t('ui.advancedFilter.banner.incomplete', '{count} filter is incomplete — filters won\'t apply until all values are picked.', { count: 1 })

package/src/backend/forms/FormHeader.tsx

@@ -181,11 +181,10 @@ function DetailHeader({
               {onDelete ? (
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="destructive"
                   size="sm"
                   onClick={onDelete}
                   disabled={isDeleting}
-                  className="text-red-600 border-red-200 hover:bg-red-50 rounded"
                 >
                   {isDeleting ? (
                     <Loader2 className="size-4 mr-2 animate-spin" />

package/src/backend/icons/__tests__/lucideRegistryGenerator.test.ts

@@ -0,0 +1,177 @@
+import { execFileSync } from 'node:child_process'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { Project, ScriptKind, SyntaxKind, type ObjectLiteralExpression, type SourceFile } from 'ts-morph'
+import { buildLucideRegistrySource } from '../../../../scripts/lucideRegistrySource.cjs'
+
+const packageDir = join(__dirname, '..', '..', '..', '..')
+const iconsDir = join(packageDir, 'src', 'backend', 'icons')
+
+type ResolvedIcon = { kebab: string; exportName: string }
+
+const populatedFixture: ResolvedIcon[] = [
+  { kebab: 'bell', exportName: 'Bell' },
+  { kebab: 'alert-circle', exportName: 'AlertCircle' },
+  { kebab: 'bar-chart-2', exportName: 'BarChart2' },
+]
+
+const duplicateExportFixture: ResolvedIcon[] = [
+  { kebab: 'trash', exportName: 'Trash' },
+  { kebab: 'trash-can', exportName: 'Trash' },
+]
+
+function parse(source: string): SourceFile {
+  const project = new Project({ useInMemoryFileSystem: true })
+  return project.createSourceFile('lucideRegistry.generated.tsx', source, {
+    overwrite: true,
+    scriptKind: ScriptKind.TSX,
+  })
+}
+
+function syntacticDiagnostics(source: string): string[] {
+  const sourceFile = parse(source)
+  return sourceFile
+    .getProject()
+    .getProgram()
+    .getSyntacticDiagnostics(sourceFile)
+    .map((diagnostic) => `${diagnostic.getLineNumber() ?? 0}: ${diagnostic.getMessageText()}`)
+}
+
+function registryObject(source: string): ObjectLiteralExpression {
+  const declaration = parse(source).getVariableDeclarationOrThrow('LUCIDE_ICON_REGISTRY')
+  return declaration.getInitializerIfKindOrThrow(SyntaxKind.ObjectLiteralExpression)
+}
+
+function registryEntries(source: string): Record<string, string> {
+  const entries: Record<string, string> = {}
+  for (const property of registryObject(source).getProperties()) {
+    const assignment = property.asKindOrThrow(SyntaxKind.PropertyAssignment)
+    entries[assignment.getSymbolOrThrow().getName()] = assignment.getInitializerOrThrow().getText()
+  }
+  return entries
+}
+
+function valueImportNames(source: string, moduleSpecifier: string): string[] {
+  return parse(source)
+    .getImportDeclarations()
+    .filter((declaration) => declaration.getModuleSpecifierValue() === moduleSpecifier)
+    .filter((declaration) => !declaration.isTypeOnly())
+    .flatMap((declaration) => declaration.getNamedImports().map((named) => named.getName()))
+}
+
+describe('buildLucideRegistrySource', () => {
+  it('maps every discovered kebab name to its lucide export', () => {
+    expect(registryEntries(buildLucideRegistrySource(populatedFixture))).toEqual({
+      'alert-circle': 'AlertCircle',
+      'bar-chart-2': 'BarChart2',
+      bell: 'Bell',
+    })
+  })
+
+  it('emits the registry keys sorted by kebab name', () => {
+    const keys = registryObject(buildLucideRegistrySource(populatedFixture))
+      .getProperties()
+      .map((property) => property.asKindOrThrow(SyntaxKind.PropertyAssignment).getSymbolOrThrow().getName())
+    expect(keys).toEqual(['alert-circle', 'bar-chart-2', 'bell'])
+  })
+
+  it('imports each lucide export exactly once', () => {
+    expect(valueImportNames(buildLucideRegistrySource(populatedFixture), 'lucide-react')).toEqual([
+      'AlertCircle',
+      'BarChart2',
+      'Bell',
+    ])
+  })
+
+  it('quotes keys that are not valid identifiers', () => {
+    const property = registryObject(buildLucideRegistrySource(populatedFixture))
+      .getPropertyOrThrow("'bar-chart-2'")
+      .asKindOrThrow(SyntaxKind.PropertyAssignment)
+    expect(property.getNameNode().getKind()).toBe(SyntaxKind.StringLiteral)
+  })
+
+  it('de-duplicates the value import when two names share one export', () => {
+    const source = buildLucideRegistrySource(duplicateExportFixture)
+    expect(valueImportNames(source, 'lucide-react')).toEqual(['Trash'])
+    expect(registryEntries(source)).toEqual({ trash: 'Trash', 'trash-can': 'Trash' })
+  })
+
+  it('emits a valid module with an empty registry when no icons are discovered', () => {
+    const source = buildLucideRegistrySource([])
+    expect(registryObject(source).getProperties()).toHaveLength(0)
+    expect(valueImportNames(source, 'lucide-react')).toEqual([])
+    expect(source).not.toContain("import {} from 'lucide-react'")
+  })
+
+  it('keeps the registry a plain mutable object literal', () => {
+    const source = buildLucideRegistrySource(populatedFixture)
+    const declaration = parse(source).getVariableDeclarationOrThrow('LUCIDE_ICON_REGISTRY')
+    expect(declaration.getTypeNodeOrThrow().getText()).toBe('Record<string, LucideIcon>')
+    expect(declaration.getVariableStatementOrThrow().isExported()).toBe(true)
+    expect(source).not.toContain('as const')
+    expect(source).not.toContain('Object.freeze')
+  })
+
+  it('keeps the LucideIcon import type-only', () => {
+    const typeOnly = parse(buildLucideRegistrySource(populatedFixture))
+      .getImportDeclarations()
+      .filter((declaration) => declaration.isTypeOnly())
+      .flatMap((declaration) => declaration.getNamedImports().map((named) => named.getName()))
+    expect(typeOnly).toEqual(['LucideIcon'])
+  })
+
+  it.each([
+    ['populated', populatedFixture],
+    ['empty', [] as ResolvedIcon[]],
+    ['duplicate exports', duplicateExportFixture],
+  ])('emits %s output with zero syntactic diagnostics', (_label, fixture) => {
+    expect(syntacticDiagnostics(buildLucideRegistrySource(fixture))).toEqual([])
+  })
+
+  it('fails loudly when an export name would produce an unparseable module', () => {
+    expect(() => buildLucideRegistrySource([{ kebab: 'broken', exportName: 'not a valid export' }])).toThrow(
+      /not syntactically valid/
+    )
+  })
+})
+
+describe('lucideRegistry barrel', () => {
+  it('keeps its public export list unchanged', () => {
+    const project = new Project({ useInMemoryFileSystem: true })
+    const barrel = project.createSourceFile(
+      'lucideRegistry.ts',
+      readFileSync(join(iconsDir, 'lucideRegistry.ts'), 'utf-8'),
+      { overwrite: true }
+    )
+    expect([...barrel.getExportedDeclarations().keys()].sort()).toEqual([
+      'LUCIDE_ICON_REGISTRY',
+      'registerAdditionalIcons',
+      'resolveRegisteredLucideIcon',
+      'resolveRegisteredLucideIconNode',
+    ])
+  })
+})
+
+describe('lucideRegistry.generated importers', () => {
+  it('is imported only from within src/backend/icons', () => {
+    const repoRoot = join(packageDir, '..', '..')
+    let matches: string[] = []
+    try {
+      matches = execFileSync(
+        'git',
+        ['grep', '-l', 'lucideRegistry.generated', '--', '*.ts', '*.tsx'],
+        { cwd: repoRoot, encoding: 'utf-8' }
+      )
+        .split('\n')
+        .filter(Boolean)
+    } catch (error) {
+      const status = (error as { status?: number }).status
+      if (status !== 1) throw error
+    }
+
+    const outsideIconsFolder = matches.filter(
+      (path) => !path.startsWith('packages/ui/src/backend/icons/')
+    )
+    expect(outsideIconsFolder).toEqual([])
+  })
+})

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -2,8 +2,7 @@
 // AUTO-GENERATED by @open-mercato/ui build. Do not edit by hand.
 // Generated from discovered icon string usages across the repo.
 
-import type * as React from 'react'
-import type { LucideIcon } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react';
 import {
   Activity,
   AlertCircle,
@@ -150,7 +149,7 @@ import {
   Wrench,
   X,
   XCircle,
-} from 'lucide-react'
+} from 'lucide-react';
 
 export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'activity': Activity,
@@ -298,37 +297,4 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'wrench': Wrench,
   'x': X,
   'x-circle': XCircle,
-}
-
-function normalizeKebabIconName(input: string): string {
-  const trimmed = input.trim()
-  if (!trimmed) return ''
-  const withoutPrefix = trimmed.startsWith('lucide:') ? trimmed.slice('lucide:'.length) : trimmed
-  if (!withoutPrefix) return ''
-  if (!withoutPrefix.includes('-') && !withoutPrefix.includes('_') && !withoutPrefix.includes(' ') && /[A-Z]/.test(withoutPrefix)) {
-    return withoutPrefix
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-      .toLowerCase()
-  }
-  return withoutPrefix
-    .replace(/[_\s]+/g, '-')
-    .replace(/-+/g, '-')
-    .toLowerCase()
-}
-
-export function resolveRegisteredLucideIcon(name: string | undefined): LucideIcon | null {
-  if (!name) return null
-  const normalized = normalizeKebabIconName(name)
-  if (!normalized) return null
-  return (LUCIDE_ICON_REGISTRY as Record<string, LucideIcon | undefined>)[normalized] ?? null
-}
-
-export function resolveRegisteredLucideIconNode(
-  name: string | undefined,
-  className: string
-): React.ReactNode | null {
-  const Icon = resolveRegisteredLucideIcon(name)
-  if (!Icon) return null
-  return <Icon className={className} />
-}
+};

package/src/backend/icons/lucideRegistry.ts

@@ -1,8 +1,8 @@
 export {
   resolveRegisteredLucideIcon,
   resolveRegisteredLucideIconNode,
-  LUCIDE_ICON_REGISTRY,
-} from './lucideRegistry.generated'
+} from './lucideRegistryRuntime'
+export { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'
 
 import type { LucideIcon } from 'lucide-react'
 import { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'

package/src/backend/icons/lucideRegistryRuntime.tsx

@@ -0,0 +1,36 @@
+import type * as React from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'
+
+function normalizeKebabIconName(input: string): string {
+  const trimmed = input.trim()
+  if (!trimmed) return ''
+  const withoutPrefix = trimmed.startsWith('lucide:') ? trimmed.slice('lucide:'.length) : trimmed
+  if (!withoutPrefix) return ''
+  if (!withoutPrefix.includes('-') && !withoutPrefix.includes('_') && !withoutPrefix.includes(' ') && /[A-Z]/.test(withoutPrefix)) {
+    return withoutPrefix
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+      .toLowerCase()
+  }
+  return withoutPrefix
+    .replace(/[_\s]+/g, '-')
+    .replace(/-+/g, '-')
+    .toLowerCase()
+}
+
+export function resolveRegisteredLucideIcon(name: string | undefined): LucideIcon | null {
+  if (!name) return null
+  const normalized = normalizeKebabIconName(name)
+  if (!normalized) return null
+  return (LUCIDE_ICON_REGISTRY as Record<string, LucideIcon | undefined>)[normalized] ?? null
+}
+
+export function resolveRegisteredLucideIconNode(
+  name: string | undefined,
+  className: string
+): React.ReactNode | null {
+  const Icon = resolveRegisteredLucideIcon(name)
+  if (!Icon) return null
+  return <Icon className={className} />
+}

package/src/backend/injection/__tests__/spotIds.extension-points.test.ts

@@ -0,0 +1,38 @@
+import {
+  CRUD_FORM_EXTENSION_SURFACES,
+  DATA_TABLE_EXTENSION_SURFACES,
+} from '@open-mercato/shared/modules/widgets/extension-points'
+import { CrudFormInjectionSpots, DataTableInjectionSpots } from '../spotIds'
+
+describe('standard extension point spot IDs', () => {
+  it('keeps every bound DataTable suffix aligned with the runtime helper', () => {
+    const tableId = 'catalog.products.list'
+    const boundSuffixes = DATA_TABLE_EXTENSION_SURFACES
+      .filter((surface) => surface.bound && surface.suffix)
+      .map((surface) => surface.suffix)
+
+    expect(boundSuffixes).toEqual([
+      'header',
+      'footer',
+      'toolbar',
+      'search-trailing',
+      'columns',
+      'row-actions',
+      'bulk-actions',
+      'filters',
+    ])
+    expect(DataTableInjectionSpots.emptyState(tableId)).toBe('data-table:catalog.products.list:empty-state')
+  })
+
+  it('keeps bound CrudForm spots distinct from helper-only spots', () => {
+    const entityId = 'catalog.product'
+    const boundKeys = CRUD_FORM_EXTENSION_SURFACES
+      .filter((surface) => surface.bound)
+      .map((surface) => surface.key)
+
+    expect(boundKeys).toEqual(['base', 'header', 'fields', 'replacement'])
+    expect(CrudFormInjectionSpots.base(entityId)).toBe('crud-form:catalog.product')
+    expect(CrudFormInjectionSpots.header(entityId)).toBe('crud-form:catalog.product:header')
+    expect(CrudFormInjectionSpots.fields(entityId)).toBe('crud-form:catalog.product:fields')
+  })
+})

package/src/backend/injection/spotIds.ts

@@ -1,4 +1,8 @@
 import type { InjectionSpotId } from '@open-mercato/shared/modules/widgets/injection'
+import {
+  crudFormExtensionSpotId,
+  dataTableExtensionSpotId,
+} from '@open-mercato/shared/modules/widgets/extension-points'
 
 export const BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID: InjectionSpotId = 'backend:record:current'
 export const BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID: InjectionSpotId = 'backend:layout:top'
@@ -18,32 +22,33 @@ export const GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID: InjectionSpotId
 
 // Standardized pattern helpers
 export const CrudFormInjectionSpots = {
-  base: (entityId: string): InjectionSpotId => `crud-form:${entityId}`,
-  beforeFields: (entityId: string): InjectionSpotId => `crud-form:${entityId}:before-fields`,
-  afterFields: (entityId: string): InjectionSpotId => `crud-form:${entityId}:after-fields`,
-  header: (entityId: string): InjectionSpotId => `crud-form:${entityId}:header`,
-  footer: (entityId: string): InjectionSpotId => `crud-form:${entityId}:footer`,
-  sidebar: (entityId: string): InjectionSpotId => `crud-form:${entityId}:sidebar`,
-  group: (entityId: string, groupId: string): InjectionSpotId => `crud-form:${entityId}:group:${groupId}`,
-  fieldBefore: (entityId: string, fieldId: string): InjectionSpotId => `crud-form:${entityId}:field:${fieldId}:before`,
-  fieldAfter: (entityId: string, fieldId: string): InjectionSpotId => `crud-form:${entityId}:field:${fieldId}:after`,
+  base: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId),
+  beforeFields: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'before-fields'),
+  afterFields: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'after-fields'),
+  header: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'header'),
+  fields: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'fields'),
+  footer: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'footer'),
+  sidebar: (entityId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, 'sidebar'),
+  group: (entityId: string, groupId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, `group:${groupId}`),
+  fieldBefore: (entityId: string, fieldId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, `field:${fieldId}:before`),
+  fieldAfter: (entityId: string, fieldId: string): InjectionSpotId => crudFormExtensionSpotId(entityId, `field:${fieldId}:after`),
 } as const
 
 export const DataTableInjectionSpots = {
-  header: (tableId: string): InjectionSpotId => `data-table:${tableId}:header`,
-  footer: (tableId: string): InjectionSpotId => `data-table:${tableId}:footer`,
-  toolbar: (tableId: string): InjectionSpotId => `data-table:${tableId}:toolbar`,
+  header: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'header'),
+  footer: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'footer'),
+  toolbar: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'toolbar'),
   // Slot rendered immediately after the search input on the same row as the
   // FilterBar — intended for compact, icon-sized triggers (AI assistants,
   // saved view shortcuts, etc.). Hosts pass the resolved spot ID through to
   // FilterBar's `searchTrailing` prop. Stays empty when the table has no
   // search input.
-  searchTrailing: (tableId: string): InjectionSpotId => `data-table:${tableId}:search-trailing`,
-  emptyState: (tableId: string): InjectionSpotId => `data-table:${tableId}:empty-state`,
-  columns: (tableId: string): InjectionSpotId => `data-table:${tableId}:columns`,
-  rowActions: (tableId: string): InjectionSpotId => `data-table:${tableId}:row-actions`,
-  bulkActions: (tableId: string): InjectionSpotId => `data-table:${tableId}:bulk-actions`,
-  filters: (tableId: string): InjectionSpotId => `data-table:${tableId}:filters`,
+  searchTrailing: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'search-trailing'),
+  emptyState: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'empty-state'),
+  columns: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'columns'),
+  rowActions: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'row-actions'),
+  bulkActions: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'bulk-actions'),
+  filters: (tableId: string): InjectionSpotId => dataTableExtensionSpotId(tableId, 'filters'),
 } as const
 
 // Portal chrome spot IDs (FROZEN once shipped)

package/src/backend/inputs/ComboboxInput.tsx

@@ -241,7 +241,7 @@ export function ComboboxInput({
         .finally(() => { if (!cancelled) setLoading(false) })
     }
     return () => { cancelled = true }
-  // eslint-disable-next-line react-hooks/exhaustive-deps — resolveDescription intentionally excluded:
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- resolveDescription intentionally excluded:
   // including it would re-run the effect on every render when the prop is an inline function
   }, [value, disabled, knownLabelValues, coveredOptionValues, eagerResolveLabel, loadSuggestions])
 

package/src/backend/messages/EmailThreadsPanel.tsx

@@ -141,7 +141,7 @@ export function EmailThreadsPanel({
       {!canCompose && composeDisabledHint ? <div>{composeDisabledHint}</div> : null}
 
       {error ? (
-        <Alert variant="destructive">
+        <Alert status="error">
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       ) : null}

package/src/backend/perspectiveState.ts

@@ -0,0 +1,44 @@
+export const PERSPECTIVE_COOKIE_PREFIX = 'om_table_perspective'
+export const PERSPECTIVE_STORAGE_PREFIX = 'om_table_perspective_snapshot'
+
+/**
+ * Purge every browser-local DataTable perspective snapshot and active-view cookie
+ * across all tables in this origin. Snapshots persist the unsaved/live table state
+ * (column widths, order, visibility) keyed only by `tableId`, so they are shared by
+ * every account that signs in on the same browser profile. Call this at the auth
+ * identity boundary so one user's unsaved layout never carries over to a different
+ * user — including a different tenant — reusing the same browser tab (#4185).
+ *
+ * Lives here rather than in DataTable so the backend shell can call it without
+ * pulling the whole table implementation into the bundle of every backend page.
+ * `@open-mercato/ui/backend/DataTable` re-exports it, which is the published
+ * import path and must stay stable.
+ */
+export function clearAllPerspectiveState(): void {
+  if (typeof window !== 'undefined') {
+    try {
+      const storage = window.localStorage
+      const staleKeys: string[] = []
+      for (let index = 0; index < storage.length; index += 1) {
+        const key = storage.key(index)
+        if (key && key.startsWith(`${PERSPECTIVE_STORAGE_PREFIX}:`)) staleKeys.push(key)
+      }
+      for (const key of staleKeys) storage.removeItem(key)
+    } catch {
+      // private mode / quota errors are non-fatal
+    }
+  }
+  if (typeof document !== 'undefined') {
+    try {
+      const cookies = document.cookie ? document.cookie.split(';') : []
+      for (const cookie of cookies) {
+        const name = cookie.split('=')[0]?.trim()
+        if (name && name.startsWith(`${PERSPECTIVE_COOKIE_PREFIX}:`)) {
+          document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax`
+        }
+      }
+    } catch {
+      // ignore — cookie access can throw in sandboxed contexts
+    }
+  }
+}

package/src/backend/schedule/ScheduleAgenda.tsx

@@ -57,9 +57,9 @@ function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallbac
 }
 
 function getKindStyles(kind: ScheduleItem['kind']): string {
-  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
-  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
-  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+  if (kind === 'event') return 'border-status-info-border bg-status-info-bg text-status-info-text'
+  if (kind === 'exception') return 'border-status-warning-border bg-status-warning-bg text-status-warning-text'
+  return 'border-status-success-border bg-status-success-bg text-status-success-text'
 }
 
 export type ScheduleAgendaProps = {

package/src/backend/schedule/ScheduleGrid.tsx

@@ -57,9 +57,9 @@ function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallbac
 }
 
 function getKindStyles(kind: ScheduleItem['kind']): string {
-  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
-  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
-  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+  if (kind === 'event') return 'border-status-info-border bg-status-info-bg text-status-info-text'
+  if (kind === 'exception') return 'border-status-warning-border bg-status-warning-bg text-status-warning-text'
+  return 'border-status-success-border bg-status-success-bg text-status-success-text'
 }
 
 export type ScheduleGridProps = {