@open-mercato/ui 0.6.5-develop.5337.1.534b781eac → 0.6.5

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

@@ -19,7 +19,13 @@ jest.mock('next/link', () => {
   ))
 })
 
-jest.mock('next/image', () => (props: any) => <img alt={props.alt} {...props} />)
+jest.mock('next/image', () => {
+  const React = require('react')
+  return (props: any) => {
+    const { unoptimized, ...rest } = props
+    return <img alt={rest.alt} data-unoptimized={unoptimized ? 'true' : 'false'} {...rest} />
+  }
+})
 
 jest.mock('next/navigation', () => ({
   usePathname: () => mockPathname,
@@ -201,6 +207,60 @@ describe('AppShell', () => {
     )
   })
 
+  it('uses backend chrome brand logo when the selected organization has one', async () => {
+    const previousFetch = global.fetch
+    const previousWindowFetch = window.fetch
+    const previousOriginalFetch = (window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch
+    const fetchMock = jest.fn().mockResolvedValue(
+      new Response(JSON.stringify({
+        brand: {
+          name: 'Acme',
+          logo: {
+            src: '/api/attachments/image/aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa/acme.png?width=320',
+            alt: 'Acme logo',
+          },
+        },
+        groups,
+        settingsSections: [],
+        settingsPathPrefixes: [],
+        profileSections: [],
+        profilePathPrefixes: [],
+        grantedFeatures: [],
+        roles: [],
+      }), { status: 200, headers: { 'content-type': 'application/json' } }),
+    ) as typeof fetch
+    global.fetch = fetchMock
+    window.fetch = fetchMock
+    ;(window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch = fetchMock
+
+    try {
+      renderWithProviders(
+        <AppShell
+          email="demo@example.com"
+          groups={[]}
+          adminNavApi="/api/auth/admin/nav-brand-logo"
+        >
+          <div>Child content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        const logo = screen.getByAltText('Acme logo')
+        expect(logo).toHaveAttribute(
+          'src',
+          '/api/attachments/image/aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa/acme.png?width=320',
+        )
+        expect(logo).toHaveAttribute('data-unoptimized', 'true')
+      })
+      expect(screen.getByText('Acme')).toBeInTheDocument()
+    } finally {
+      global.fetch = previousFetch
+      window.fetch = previousWindowFetch
+      ;(window as Window & { __omOriginalFetch?: typeof fetch }).__omOriginalFetch = previousOriginalFetch
+    }
+  })
+
   it('renders nested settings links when settings parent route is active', async () => {
     mockPathname = '/backend/entities/user'
 

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

@@ -58,6 +58,9 @@ import { dismissRecordConflict, getRecordConflictForTest } from '../conflicts'
 
 const dict = {
   'ui.forms.actions.save': 'Save',
+  'ui.forms.actions.delete': 'Delete',
+  'ui.forms.flash.deleteSuccess': 'Record deleted.',
+  'ui.forms.flash.deleteError': 'Failed to delete record.',
   'ui.forms.flash.recordModified': 'This record was modified by someone else. Refresh and try again.',
 }
 
@@ -171,6 +174,55 @@ describe('CrudForm — optimisticLockUpdatedAt prop wiring', () => {
       'error',
     )
   })
+
+  it('delete: a 409 conflict surfaces the conflict bar and never shows a success toast (regression #2409)', async () => {
+    // Regression guard for #2409: when an optimistic-lock conflict (409) is
+    // thrown from onDelete, CrudForm must route it to the unified conflict bar
+    // and MUST NOT flash a "Record deleted." success toast. A previous version
+    // of the planner Availability Schedule page swallowed the delete error, so
+    // CrudForm treated the failed delete as a success and showed a false toast.
+    dismissRecordConflict()
+    const conflict = Object.assign(new Error('record_modified'), {
+      status: 409,
+      error: 'record_modified',
+      code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+      currentUpdatedAt: '2026-05-25T08:42:19.000Z',
+      expectedUpdatedAt: '2026-05-25T08:42:18.000Z',
+    })
+    const onSubmit = jest.fn(async () => undefined)
+    const onDelete = jest.fn(async () => {
+      throw conflict
+    })
+    const { container } = renderWithProviders(
+      <CrudForm<{ displayName: string; id?: string }>
+        fields={fields}
+        initialValues={{ id: 'rec-1', displayName: 'old' }}
+        onSubmit={onSubmit}
+        onDelete={onDelete}
+        optimisticLockUpdatedAt="2026-05-25T08:42:18.000Z"
+      />,
+      { dict },
+    )
+
+    const deleteButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Delete',
+    ) as HTMLButtonElement
+    expect(deleteButton).toBeTruthy()
+
+    await act(async () => {
+      fireEvent.click(deleteButton)
+    })
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalledTimes(1))
+    await waitFor(() => {
+      const entry = getRecordConflictForTest()
+      expect(entry).not.toBeNull()
+      expect(entry?.message).toBe('This record was modified by someone else. Refresh and try again.')
+    })
+    // The false success toast is the actual bug — it must never fire on a 409.
+    expect(flashMock).not.toHaveBeenCalledWith('Record deleted.', 'success')
+    expect(flashMock).not.toHaveBeenCalledWith(expect.anything(), 'success')
+  })
 })
 
 type AutoFormValues = { displayName: string; id?: string; updatedAt?: string | null; updated_at?: string | null }

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

@@ -0,0 +1,99 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { DataTable } from '../DataTable'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { render } from '@testing-library/react'
+import { RowActions } from '../RowActions'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+type Row = { id: string; title: string; status: string }
+
+const tokensOf = (el: Element | null): string[] =>
+  (el?.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
+
+// Pinned columns must never consume the viewport on phones: an unconditionally
+// `sticky` first column (often ~300px wide) plus a sticky actions column can
+// exceed a small screen entirely, leaving the middle columns scrolling
+// invisibly underneath with no reachable window. Pinning (position, offsets,
+// z-index, opaque background, edge shadows) must therefore apply only from the
+// `md` breakpoint up, so narrow viewports fall back to the documented plain
+// horizontal-scroll behavior where every column can be swiped into view.
+describe('DataTable sticky columns are viewport-gated', () => {
+  function renderStickyTable() {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'title', header: 'Title' },
+      { accessorKey: 'status', header: 'Status' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    const result = render(
+      <QueryClientProvider client={queryClient}>
+        <I18nProvider locale="en" dict={{}}>
+          <DataTable
+            columns={columns}
+            data={[{ id: '1', title: 'Solar rollout', status: 'open' }]}
+            stickyFirstColumn
+            stickyActionsColumn
+            rowActions={() => (
+              <RowActions items={[{ id: 'edit', label: 'Edit', onSelect: () => {} }]} />
+            )}
+          />
+        </I18nProvider>
+      </QueryClientProvider>,
+    )
+    return { ...result, queryClient }
+  }
+
+  it('pins the first data column only from md up', () => {
+    const { container, queryClient } = renderStickyTable()
+    try {
+      const headerCells = container.querySelectorAll('thead th')
+      const firstHeader = headerCells[0]
+      const firstBodyCell = container.querySelector('tbody tr td')
+
+      for (const cell of [firstHeader, firstBodyCell]) {
+        const tokens = tokensOf(cell)
+        expect(tokens).toEqual(
+          expect.arrayContaining(['md:sticky', 'md:left-0', 'md:bg-background', 'md:after:absolute']),
+        )
+        expect(tokens).not.toContain('sticky')
+        expect(tokens).not.toContain('left-0')
+        expect(tokens).not.toContain('bg-background')
+        expect(tokens).not.toContain('after:absolute')
+      }
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('pins the actions column only from md up', () => {
+    const { container, queryClient } = renderStickyTable()
+    try {
+      const headerCells = container.querySelectorAll('thead th')
+      const actionsHeader = headerCells[headerCells.length - 1]
+      const actionsBodyCell = container.querySelector('tbody tr td[data-actions-cell]')
+      expect(actionsBodyCell).not.toBeNull()
+
+      for (const cell of [actionsHeader, actionsBodyCell]) {
+        const tokens = tokensOf(cell)
+        expect(tokens).toEqual(
+          expect.arrayContaining(['md:sticky', 'md:right-0', 'md:bg-background', 'md:before:absolute']),
+        )
+        expect(tokens).not.toContain('sticky')
+        expect(tokens).not.toContain('right-0')
+        expect(tokens).not.toContain('bg-background')
+        expect(tokens).not.toContain('before:absolute')
+      }
+    } finally {
+      queryClient.clear()
+    }
+  })
+})

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

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('next/link', () => {
+  const MockLink = ({ children, href, ...rest }: { children: React.ReactNode; href: string }) => (
+    <a href={href} {...rest}>{children}</a>
+  )
+  MockLink.displayName = 'MockLink'
+  return MockLink
+})
+
+jest.mock('../injection/InjectionSpot', () => ({
+  InjectionSpot: () => null,
+}))
+
+jest.mock('../injection/useInjectedMenuItems', () => ({
+  useInjectedMenuItems: () => ({ items: [], isLoading: false }),
+}))
+
+jest.mock('@open-mercato/ui/theme', () => ({
+  useTheme: () => ({ theme: 'light', resolvedTheme: 'light', setTheme: jest.fn() }),
+}))
+
+import { ProfileDropdown } from '../ProfileDropdown'
+
+describe('ProfileDropdown', () => {
+  it('does not render the menu until the trigger is clicked', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+    expect(screen.queryByTestId('profile-dropdown')).not.toBeInTheDocument()
+  })
+
+  it('renders the open menu in a body portal so it escapes the header stacking context', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+
+    fireEvent.click(screen.getByTestId('profile-dropdown-trigger'))
+
+    const menu = screen.getByTestId('profile-dropdown')
+    expect(menu).toBeInTheDocument()
+    // createPortal mounts the menu directly under document.body, outside the
+    // sticky header's backdrop-blur stacking context (regression: issue #2941).
+    expect(menu.parentElement).toBe(document.body)
+    // It must use fixed positioning + the popover layer rather than being
+    // absolutely positioned inside the header.
+    expect(menu.className).toContain('fixed')
+    expect(menu.className).toContain('z-popover')
+    expect(menu.className).not.toContain('absolute')
+  })
+
+  it('closes the menu (unmounting the portal) on Escape', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+
+    fireEvent.click(screen.getByTestId('profile-dropdown-trigger'))
+    expect(screen.getByTestId('profile-dropdown')).toBeInTheDocument()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByTestId('profile-dropdown')).not.toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/lazy-heavy-libraries.test.ts

@@ -123,4 +123,12 @@ describe('heavy libraries are lazy-loaded', () => {
     const source = read('packages/ui/src/backend/schedule/ScheduleCalendar.tsx')
     expect(source).toMatch(/import\s+['"]react-big-calendar\/lib\/css\/react-big-calendar\.css['"]/)
   })
+
+  it('AttachmentContentPreview does not statically import react-markdown or remark-gfm', () => {
+    const source = read(
+      'packages/core/src/modules/attachments/components/AttachmentContentPreview.tsx',
+    )
+    expect(source).not.toMatch(/from\s+['"]react-markdown['"]/)
+    expect(source).not.toMatch(/from\s+['"]remark-gfm['"]/)
+  })
 })

package/src/backend/charts/KpiCard.tsx

@@ -20,6 +20,8 @@ export type KpiCardProps = {
   suffix?: string
   className?: string
   headerAction?: React.ReactNode
+  footer?: React.ReactNode
+  titleClassName?: string
 }
 
 function defaultFormatValue(value: number): string {
@@ -32,17 +34,21 @@ function defaultFormatValue(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
-function formatPercentageChange(value: number): string {
-  const formatted = Math.abs(value).toFixed(1)
-  return `${formatted}%`
+function formatPercentageChange(value: number, unit: string = '%'): string {
+  const abs = Math.abs(value)
+  const formatted = Number.isInteger(abs) ? String(abs) : abs.toFixed(1)
+  return `${formatted}${unit}`
 }
 
 type BadgeDeltaProps = {
   direction: 'up' | 'down' | 'unchanged'
   value: number
+  unit?: string
+  className?: string
+  title?: string
 }
 
-function BadgeDelta({ direction, value }: BadgeDeltaProps) {
+function BadgeDelta({ direction, value, unit = '%', className = '', title = 'Compared to previous period' }: BadgeDeltaProps) {
   const baseClasses = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium'
 
   const directionClasses = {
@@ -71,15 +77,17 @@ function BadgeDelta({ direction, value }: BadgeDeltaProps) {
 
   return (
     <span
-      className={`${baseClasses} ${directionClasses[direction]}`}
-      title="Compared to previous period"
+      className={`${baseClasses} ${directionClasses[direction]}${className ? ` ${className}` : ''}`}
+      title={title}
     >
       {icons[direction]}
-      {formatPercentageChange(value)}
+      {formatPercentageChange(value, unit)}
     </span>
   )
 }
 
+export const DeltaBadge = BadgeDelta
+
 export function KpiCard({
   title,
   value,
@@ -92,13 +100,15 @@ export function KpiCard({
   suffix = '',
   className = '',
   headerAction,
+  footer,
+  titleClassName,
 }: KpiCardProps) {
   const hasWrapper = !!title
   const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className
 
   const headerRow = (title || headerAction) ? (
     <div className="flex items-center justify-between gap-2 mb-2">
-      {title && <p className="text-sm font-medium text-muted-foreground">{title}</p>}
+      {title && <p className={titleClassName ?? 'text-sm font-medium text-muted-foreground'}>{title}</p>}
       {headerAction}
     </div>
   ) : null
@@ -136,10 +146,9 @@ export function KpiCard({
     <div className={wrapperClass}>
       {headerRow}
       <div className="flex items-baseline gap-3">
-        <p className="text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground">
-          {prefix}
-          {formatValue(value)}
-          {suffix}
+        <p className="flex items-baseline gap-1.5 text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground">
+          <span>{prefix}{formatValue(value)}</span>
+          {suffix ? <span className="text-sm font-medium text-muted-foreground">{suffix}</span> : null}
         </p>
         {trend && (
           <BadgeDelta direction={trend.direction} value={trend.value} />
@@ -148,6 +157,7 @@ export function KpiCard({
       {trend && comparisonLabel && (
         <p className="mt-1 text-xs text-muted-foreground">{comparisonLabel}</p>
       )}
+      {footer != null && <div className="mt-3">{footer}</div>}
     </div>
   )
 }

package/src/backend/charts/Sparkline.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from 'react'
+
+export type SparklineProps = {
+  values: number[]
+  ariaLabel: string
+  className?: string
+  width?: number
+  height?: number
+}
+
+function buildPoints(values: number[], width: number, height: number): Array<{ x: number; y: number }> {
+  const count = values.length
+  const padding = 2
+  const usableHeight = Math.max(height - padding * 2, 0)
+
+  if (count === 1) {
+    return [{ x: width / 2, y: height / 2 }]
+  }
+
+  let min = values[0]
+  let max = values[0]
+  for (const value of values) {
+    if (value < min) min = value
+    if (value > max) max = value
+  }
+  const range = max - min
+
+  const stepX = count > 1 ? width / (count - 1) : 0
+
+  return values.map((value, index) => {
+    const x = stepX * index
+    const ratio = range === 0 ? 0.5 : (value - min) / range
+    const y = padding + (1 - ratio) * usableHeight
+    return { x, y }
+  })
+}
+
+function toPath(points: Array<{ x: number; y: number }>): string {
+  return points
+    .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`)
+    .join(' ')
+}
+
+export function Sparkline({
+  values,
+  ariaLabel,
+  className = '',
+  width = 96,
+  height = 28,
+}: SparklineProps) {
+  if (!values || values.length === 0) {
+    return null
+  }
+
+  const points = buildPoints(values, width, height)
+  const linePath = toPath(points)
+
+  const firstPoint = points[0]
+  const lastPoint = points[points.length - 1]
+  const areaPath = `${linePath} L ${lastPoint.x.toFixed(2)} ${height} L ${firstPoint.x.toFixed(2)} ${height} Z`
+
+  return (
+    <svg
+      role="img"
+      aria-label={ariaLabel}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      className={className}
+    >
+      <path d={areaPath} fill="currentColor" fillOpacity={0.12} stroke="none" />
+      <path
+        d={linePath}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Sparkline

package/src/backend/charts/index.ts

@@ -1,4 +1,5 @@
-export { KpiCard, type KpiCardProps, type KpiTrend } from './KpiCard'
+export { KpiCard, DeltaBadge, type KpiCardProps, type KpiTrend } from './KpiCard'
+export { Sparkline, type SparklineProps } from './Sparkline'
 export { BarChart, type BarChartProps, type BarChartDataItem } from './BarChart'
 export { LineChart, type LineChartProps, type LineChartDataItem } from './LineChart'
 export { PieChart, type PieChartProps, type PieChartDataItem } from './PieChart'

package/src/backend/dashboard/DashboardScreen.tsx

@@ -10,7 +10,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { getDashboardWidgets, loadDashboardWidgetModule } from './widgetRegistry'
 import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
 import { cn } from '@open-mercato/shared/lib/utils'
-import { GripVertical, Info, Plus, RefreshCw, Settings2, Trash2, X, Loader2 } from 'lucide-react'
+import { GripVertical, Plus, RefreshCw, Settings2, Trash2, X, Loader2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { InjectionSpot } from '../injection/InjectionSpot'
@@ -366,7 +366,6 @@ export function DashboardScreen() {
   if (!hasRegisteredWidgets && layout.length === 0) {
     return (
       <Alert variant="info">
-        <Info className="h-4 w-4" aria-hidden />
         <AlertTitle>{t('dashboard.empty.noWidgets.title', 'No dashboard widgets yet')}</AlertTitle>
         <AlertDescription>
           {t(

package/src/backend/injection/InjectionSpot.tsx

@@ -76,6 +76,15 @@ export function useInjectionWidgets<TContext = unknown>(
   const [error, setError] = React.useState<string | null>(null)
   const [registryVersion, setRegistryVersion] = React.useState(() => getInjectionRegistryVersion())
   const loadedRef = React.useRef(false)
+  const contextRef = React.useRef(options?.context)
+  const triggerOnLoadRef = React.useRef(options?.triggerOnLoad)
+  const onEventRef = React.useRef(options?.onEvent)
+
+  React.useEffect(() => {
+    contextRef.current = options?.context
+    triggerOnLoadRef.current = options?.triggerOnLoad
+    onEventRef.current = options?.onEvent
+  })
 
   React.useEffect(() => {
     return subscribeToInjectionRegistryChanges(() => {
@@ -105,16 +114,16 @@ export function useInjectionWidgets<TContext = unknown>(
           placement: w.placement,
         }))
         setWidgets(widgetList)
-        
+
         // Trigger onLoad for all widgets
-        if (!loadedRef.current && options?.triggerOnLoad) {
+        if (!loadedRef.current && triggerOnLoadRef.current) {
           loadedRef.current = true
           for (const widget of widgetList) {
             if (widget.module.eventHandlers?.onLoad) {
               try {
-                const widgetContext = injectSharedStateIntoContext(options.context as TContext, widget.moduleId)
+                const widgetContext = injectSharedStateIntoContext(contextRef.current as TContext, widget.moduleId)
                 await widget.module.eventHandlers.onLoad(widgetContext)
-                options.onEvent?.('onLoad', widget.widgetId)
+                onEventRef.current?.('onLoad', widget.widgetId)
               } catch (err) {
                 console.error(`[InjectionSpot] Error in onLoad for widget ${widget.widgetId}:`, err)
               }
@@ -133,7 +142,9 @@ export function useInjectionWidgets<TContext = unknown>(
     return () => {
       mounted = false
     }
-  }, [spotId, options?.context, options?.triggerOnLoad, options?.onEvent, registryVersion])
+    // context/triggerOnLoad/onEvent are read from refs so only a real registry-version bump reloads the spot
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [spotId, registryVersion])
 
   return { widgets, loading, error }
 }
@@ -148,16 +159,25 @@ export function InjectionSpot<TContext = unknown, TData = unknown>({
   widgetsOverride,
 }: InjectionSpotProps<TContext, TData>) {
   const useSpotId = widgetsOverride ? null : spotId
+  const onEventRef = React.useRef(onEvent)
+  React.useEffect(() => {
+    onEventRef.current = onEvent
+  })
+  const hasOnEvent = Boolean(onEvent)
+  const stableOnEvent = React.useMemo(
+    () => (hasOnEvent ? (event: 'onLoad', id: string) => onEventRef.current?.(event, id) : undefined),
+    [hasOnEvent],
+  )
   const { widgets, loading, error } = useInjectionWidgets<TContext>(useSpotId, {
     context,
     triggerOnLoad: !widgetsOverride,
-    onEvent: onEvent ? (event, id) => onEvent(event, id) : undefined,
+    onEvent: stableOnEvent,
   })
   const effectiveWidgets = widgetsOverride ?? widgets
   const effectiveLoading = widgetsOverride ? false : loading
   const effectiveError = widgetsOverride ? null : error
 
-  if (effectiveLoading) {
+  if (effectiveLoading && effectiveWidgets.length === 0) {
     return null
   }