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

package/src/backend/injection/__tests__/InjectionSpot.remount.test.tsx

@@ -0,0 +1,140 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { act, render, waitFor } from '@testing-library/react'
+
+const mockState: { registryVersion: number; listener: null | (() => void) } = {
+  registryVersion: 0,
+  listener: null,
+}
+const mockLoadSpy = jest.fn()
+
+jest.mock('@open-mercato/shared/modules/widgets/injection-loader', () => ({
+  getInjectionRegistryVersion: () => mockState.registryVersion,
+  subscribeToInjectionRegistryChanges: (listener: () => void) => {
+    mockState.listener = listener
+    return () => {
+      mockState.listener = null
+    }
+  },
+  loadInjectionWidgetsForSpot: (...args: unknown[]) => mockLoadSpy(...args),
+}))
+
+jest.mock('../WidgetSharedState', () => ({
+  getWidgetSharedState: () => ({}),
+}))
+
+import { InjectionSpot } from '../InjectionSpot'
+
+const SPOT_ID = 'data-table:test.products:toolbar'
+const widgetMountSpy = jest.fn()
+const onLoadSpy = jest.fn()
+
+function makeWidget(id: string) {
+  return {
+    metadata: { id },
+    moduleId: 'test_module',
+    key: id,
+    placement: undefined,
+    eventHandlers: { onLoad: onLoadSpy },
+    Widget: ({ context }: { context: unknown }) => {
+      React.useEffect(() => {
+        widgetMountSpy()
+      }, [])
+      const label = (context as { label?: string } | null)?.label ?? ''
+      return <div data-testid="injected-widget">{label}</div>
+    },
+  }
+}
+
+function Harness({ tick, onEvent }: { tick: number; onEvent?: (event: 'onLoad', id: string) => void }) {
+  // Fresh context identity on every render — mirrors hosts that feed a useMemo/closure
+  // context whose identity changes on routine interactions (e.g. row-selection toggles).
+  const context = { label: 'ctx', tick }
+  return <InjectionSpot spotId={SPOT_ID} context={context} onEvent={onEvent} />
+}
+
+describe('InjectionSpot — context identity changes do not remount injected widgets', () => {
+  beforeEach(() => {
+    mockState.registryVersion = 0
+    mockState.listener = null
+    mockLoadSpy.mockReset()
+    mockLoadSpy.mockResolvedValue([makeWidget('test_module:hello')])
+    widgetMountSpy.mockClear()
+    onLoadSpy.mockClear()
+  })
+
+  it('renders the injected widget and loads the spot exactly once', async () => {
+    const { findByTestId } = render(<Harness tick={0} />)
+    await findByTestId('injected-widget')
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+    expect(widgetMountSpy).toHaveBeenCalledTimes(1)
+    expect(onLoadSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does NOT reload or remount when only the context identity changes', async () => {
+    const { rerender, findByTestId } = render(<Harness tick={0} />)
+    await findByTestId('injected-widget')
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+    expect(widgetMountSpy).toHaveBeenCalledTimes(1)
+
+    for (let next = 1; next <= 3; next += 1) {
+      rerender(<Harness tick={next} />)
+      // flush effects for this render
+      await act(async () => {})
+    }
+
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+    expect(widgetMountSpy).toHaveBeenCalledTimes(1)
+    expect(onLoadSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does NOT reload when a fresh onEvent closure is passed on every render', async () => {
+    const { rerender, findByTestId } = render(<Harness tick={0} onEvent={() => {}} />)
+    await findByTestId('injected-widget')
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+
+    rerender(<Harness tick={1} onEvent={() => {}} />)
+    await act(async () => {})
+
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+    expect(widgetMountSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('DOES reload when the injection registry version actually bumps', async () => {
+    const { findByTestId } = render(<Harness tick={0} />)
+    await findByTestId('injected-widget')
+    expect(mockLoadSpy).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      mockState.registryVersion += 1
+      mockState.listener?.()
+    })
+
+    await waitFor(() => expect(mockLoadSpy).toHaveBeenCalledTimes(2))
+  })
+
+  it('keeps the previously-rendered widget mounted during a registry reload', async () => {
+    const { findByTestId } = render(<Harness tick={0} />)
+    await findByTestId('injected-widget')
+
+    let resolveReload: (value: ReturnType<typeof makeWidget>[]) => void = () => {}
+    mockLoadSpy.mockImplementationOnce(
+      () => new Promise((resolve) => { resolveReload = resolve }),
+    )
+
+    await act(async () => {
+      mockState.registryVersion += 1
+      mockState.listener?.()
+    })
+
+    // Reload is in-flight (loading === true) but the existing widget stays mounted.
+    expect(await findByTestId('injected-widget')).toBeTruthy()
+
+    await act(async () => {
+      resolveReload([makeWidget('test_module:hello')])
+    })
+
+    await findByTestId('injected-widget')
+  })
+})

package/src/backend/injection/useGuardedMutation.ts

@@ -43,7 +43,7 @@ export function useGuardedMutation<TContext extends GuardedMutationContext>({
       error,
     })
     // Default UX for OSS optimistic-lock conflicts (spec
-    // .ai/specs/2026-05-25-oss-optimistic-locking.md §3.6): when the
+    // .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md §3.6): when the
     // server returns 409 with `code: 'optimistic_lock_conflict'`,
     // surface the conflict on the unified, persistent, error-styled
     // RecordConflictBanner (rendered in AppShell) instead of a transient

package/src/backend/utils/optimisticLock.ts

@@ -1,6 +1,6 @@
 /**
  * Client-side helpers for the OSS opt-in optimistic-locking guard
- * (spec: .ai/specs/2026-05-25-oss-optimistic-locking.md).
+ * (spec: .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md).
  *
  * These are deliberately small and dependency-light so they can be wired
  * into any backend page without touching the shared CrudForm / useGuardedMutation

package/src/primitives/__tests__/alert.test.tsx

@@ -133,6 +133,22 @@ describe('Alert primitive', () => {
       render(<Alert status="information" style="light" icon={<Custom />}>Info</Alert>)
       expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
     })
+
+    it('renders exactly one leading icon by default (#2759)', () => {
+      const { container } = render(<Alert status="information">Info</Alert>)
+      expect(container.querySelectorAll('[data-slot="alert-icon-badge"]')).toHaveLength(1)
+      expect(container.querySelectorAll('[data-slot="alert-icon-badge"] > svg')).toHaveLength(1)
+    })
+
+    it('icon prop REPLACES the default status icon instead of adding a second one (#2759)', () => {
+      const Custom = () => <svg data-testid="custom-icon" aria-hidden="true" />
+      const { container } = render(
+        <Alert status="information" icon={<Custom />}>Info</Alert>,
+      )
+      expect(container.querySelectorAll('[data-slot="alert-icon-badge"]')).toHaveLength(1)
+      expect(container.querySelectorAll('[data-slot="alert-icon-badge"] > svg')).toHaveLength(1)
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
   })
 
   describe('Action slot + dismiss', () => {

package/src/primitives/__tests__/avatar.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Avatar } from '../avatar'
+import { Avatar, AvatarStack } from '../avatar'
 
 describe('Avatar', () => {
   it('renders two-character initials for multi-word labels', () => {
@@ -193,3 +193,38 @@ describe('Avatar', () => {
     })
   })
 })
+
+describe('AvatarStack', () => {
+  it('derives the +N overflow from children beyond max', () => {
+    render(
+      <AvatarStack max={2}>
+        <Avatar label="Alice Adams" />
+        <Avatar label="Bob Brown" />
+        <Avatar label="Carol Clark" />
+      </AvatarStack>,
+    )
+    expect(screen.getByText('+1')).toBeInTheDocument()
+  })
+
+  it('adds overflowCount (server-truncated items) to the children-derived overflow', () => {
+    // 5 children, max 4 → 1 hidden locally; overflowCount=7 server-hidden → "+8".
+    render(
+      <AvatarStack max={4} overflowCount={7}>
+        {Array.from({ length: 5 }, (_, index) => (
+          <Avatar key={index} label={`Owner ${index}`} />
+        ))}
+      </AvatarStack>,
+    )
+    expect(screen.getByText('+8')).toBeInTheDocument()
+  })
+
+  it('shows no overflow badge when children fit and overflowCount is 0', () => {
+    render(
+      <AvatarStack max={4}>
+        <Avatar label="Alice Adams" />
+        <Avatar label="Bob Brown" />
+      </AvatarStack>,
+    )
+    expect(screen.queryByText(/^\+\d/)).not.toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/pagination.test.tsx

@@ -60,6 +60,37 @@ describe('Pagination', () => {
     expect(nav.getAttribute('aria-label')).toBe('Pagination')
   })
 
+  // The info text, page buttons, and page-size select together need ~600px of
+  // min-content (info and the select are shrink-0). Without flex-wrap the row
+  // cannot compress on a phone-width container, overflows its card, and drags
+  // the whole page into horizontal scroll. Every level that holds a fixed-width,
+  // shrink-0 button run must be allowed to wrap: the root row, the controls
+  // group (first/prev/pages/next/last ≈ 392px at 6 pages — wider than a phone
+  // on its own), and the page-number list itself (so a long run wraps instead
+  // of overflowing). Wrapping just the outer row leaves the ~392px controls
+  // group on a single unbreakable line that still overflows.
+  it('lets every fixed-width control row wrap on narrow containers', () => {
+    const { container } = render(
+      <Pagination
+        page={3}
+        pageSize={20}
+        total={120}
+        onPageChange={() => {}}
+        onPageSizeChange={() => {}}
+      />,
+    )
+    const tokensOf = (selector: string) => {
+      const el = container.querySelector(selector) as HTMLElement | null
+      expect(el).not.toBeNull()
+      return (el!.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
+    }
+    expect(tokensOf('[data-slot="pagination"]')).toEqual(
+      expect.arrayContaining(['flex-wrap', 'justify-between']),
+    )
+    expect(tokensOf('[data-slot="pagination-controls"]')).toContain('flex-wrap')
+    expect(tokensOf('[data-slot="pagination-pages"]')).toContain('flex-wrap')
+  })
+
   it('renders "Page X of Y" info by default', () => {
     const { container } = render(
       <Pagination page={2} pageSize={10} total={100} onPageChange={() => {}} />,

package/src/primitives/avatar.tsx

@@ -279,12 +279,18 @@ export type AvatarStackProps = {
   max?: number
   size?: VariantProps<typeof avatarVariants>['size']
   className?: string
+  /**
+   * Additional hidden items not represented by `children` — e.g. a server-truncated list that
+   * already returned only the top N owners. Added to the children-derived overflow so the
+   * "+N" badge reflects the true number of omitted items, not just the ones dropped locally.
+   */
+  overflowCount?: number
 }
 
-export function AvatarStack({ children, max = 4, size = 'md', className }: AvatarStackProps) {
+export function AvatarStack({ children, max = 4, size = 'md', className, overflowCount = 0 }: AvatarStackProps) {
   const items = React.Children.toArray(children)
   const visible = items.slice(0, max)
-  const overflow = items.length - max
+  const overflow = Math.max(0, items.length - max) + Math.max(0, overflowCount)
 
   return (
     <div

package/src/primitives/pagination.tsx

@@ -235,7 +235,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
         ref={ref}
         data-slot="pagination"
         aria-label={props['aria-label'] ?? t('ui.pagination.landmark.ariaLabel', 'Pagination')}
-        className={cn('flex w-full items-center justify-between gap-6', className)}
+        className={cn('flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2', className)}
         {...props}
       >
         {showInfo ? (
@@ -251,7 +251,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
         <div
           data-slot="pagination-controls"
-          className="inline-flex items-center gap-2"
+          className="flex flex-wrap items-center justify-center gap-2"
         >
           {showFirstLast ? (
             <button
@@ -280,7 +280,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
           <ol
             data-slot="pagination-pages"
-            className="inline-flex items-center gap-2 list-none"
+            className="flex flex-wrap items-center justify-center gap-2 list-none"
           >
             {items.map((entry, index) => {
               if (entry === 'ellipsis-left' || entry === 'ellipsis-right') {

package/src/utils/__tests__/format.test.ts

@@ -0,0 +1,58 @@
+import { formatCurrency, formatDate } from '../format'
+
+describe('formatCurrency', () => {
+  it('returns null for empty input', () => {
+    expect(formatCurrency(null)).toBeNull()
+    expect(formatCurrency(undefined)).toBeNull()
+    expect(formatCurrency('')).toBeNull()
+  })
+
+  it('echoes back a non-numeric string', () => {
+    expect(formatCurrency('n/a')).toBe('n/a')
+  })
+
+  it('returns null for a non-finite number', () => {
+    expect(formatCurrency(Number.NaN)).toBeNull()
+  })
+
+  it('formats a numeric value with an ISO currency code', () => {
+    const result = formatCurrency(1234.5, 'usd')
+    expect(result).toMatch(/1,234\.5/)
+    expect(result).toMatch(/\$|USD/)
+  })
+
+  it('formats a numeric string the same as a number', () => {
+    expect(formatCurrency('1234.5', 'USD')).toBe(formatCurrency(1234.5, 'USD'))
+  })
+
+  it('falls back to a plain number without a currency code', () => {
+    expect(formatCurrency(1000)).toBe(new Intl.NumberFormat().format(1000))
+  })
+
+  it('ignores currency codes that are not three characters', () => {
+    expect(formatCurrency(1000, 'US')).toBe(new Intl.NumberFormat().format(1000))
+  })
+})
+
+describe('formatDate', () => {
+  it('returns null for empty input', () => {
+    expect(formatDate(null)).toBeNull()
+    expect(formatDate(undefined)).toBeNull()
+    expect(formatDate('')).toBeNull()
+  })
+
+  it('echoes back an unparseable date', () => {
+    expect(formatDate('not-a-date')).toBe('not-a-date')
+  })
+
+  it('formats a valid ISO date as a localized short date', () => {
+    const result = formatDate('2026-06-09T00:00:00.000Z')
+    expect(result).toEqual(
+      new Date('2026-06-09T00:00:00.000Z').toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+    )
+  })
+})

package/src/utils/format.ts

@@ -0,0 +1,40 @@
+/**
+ * Format a monetary value with an optional ISO-4217 currency code.
+ *
+ * Returns `null` for empty input, the original string for non-numeric input,
+ * and falls back to a plain number format (optionally suffixed with the code)
+ * when the currency code is missing or rejected by `Intl.NumberFormat`.
+ */
+export function formatCurrency(
+  value: string | number | null | undefined,
+  currency?: string | null,
+): string | null {
+  if (value === null || value === undefined || value === '') return null
+  const numeric = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numeric)) {
+    return typeof value === 'string' ? value : null
+  }
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
+  try {
+    if (code) {
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(numeric)
+    }
+  } catch {
+    // fall through to plain number formatting
+  }
+  const formatted = new Intl.NumberFormat().format(numeric)
+  return code ? `${formatted} ${code}` : formatted
+}
+
+/**
+ * Format an ISO date string as a localized short date (e.g. `Jun 9, 2026`).
+ *
+ * Returns `null` for empty input and echoes the original value back when it is
+ * not a parseable date.
+ */
+export function formatDate(value: string | null | undefined): string | null {
+  if (!value) return null
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}