@open-mercato/ui 0.6.5-develop.5382.1.f542de69af → 0.6.6-develop.5412.1.e2a52b14f0

package/src/backend/DataTable.tsx

@@ -264,6 +264,8 @@ export type DataTableProps<T> = {
   extensionTableId?: string
   stickyFirstColumn?: boolean
   stickyActionsColumn?: boolean
+  /** Horizontal alignment of the row-actions (kebab) column header + cell. Defaults to 'right'. */
+  actionsColumnAlign?: 'right' | 'center'
   virtualized?: boolean
   virtualizedMaxHeight?: number | string
   virtualizedOverscan?: number
@@ -1000,6 +1002,7 @@ export function DataTable<T>({
   extensionTableId: extensionTableIdProp,
   stickyFirstColumn = false,
   stickyActionsColumn = false,
+  actionsColumnAlign = 'right',
   virtualized = false,
   virtualizedMaxHeight,
   virtualizedOverscan = 10,
@@ -2710,7 +2713,7 @@ export function DataTable<T>({
                     <Button
                       variant="ghost"
                       type="button"
-                      className={`h-auto p-0 font-medium ${sortable && header.column.getCanSort?.() ? 'cursor-pointer select-none' : ''}`}
+                      className={`h-auto p-0 has-[>svg]:px-0 font-medium ${sortable && header.column.getCanSort?.() ? 'cursor-pointer select-none' : ''}`}
                       onClick={() => sortable && header.column.toggleSorting?.(header.column.getIsSorted() === 'asc')}
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
@@ -2737,7 +2740,7 @@ export function DataTable<T>({
                 {rowActions || injectedRowActions.length > 0 ? (
                   <TableHead
                     className={cn(
-                      'w-0 text-right',
+                      actionsColumnAlign === 'center' ? 'w-0 text-center' : 'w-0 text-right',
                       stickyActionsColumn && `sticky right-0 z-20 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                     )}
                   >
@@ -2868,7 +2871,7 @@ export function DataTable<T>({
                     {rowActions || injectedRowActions.length > 0 ? (
                       <TableCell
                         className={cn(
-                          'text-right whitespace-nowrap',
+                          actionsColumnAlign === 'center' ? 'text-center whitespace-nowrap' : 'text-right whitespace-nowrap',
                           stickyActionsColumn && `sticky right-0 z-10 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                         )}
                         data-actions-cell

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/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/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