@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/backend/EmptyState.tsx

@@ -1,65 +1,15 @@
-"use client"
-
-import * as React from 'react'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { Button } from '@open-mercato/ui/primitives/button'
-import { Plus } from 'lucide-react'
+/**
+ * @deprecated Import `EmptyState` from `@open-mercato/ui/primitives/empty-state` instead.
+ *
+ * This shim preserves the legacy import path
+ * `@open-mercato/ui/backend/EmptyState` for existing consumers
+ * (TabEmptyState, customers/auth/sales backend pages, …) while the
+ * EmptyState is promoted to a primitive in DS Foundation v3. Public API
+ * is preserved 1:1 — same props, same default outline button render
+ * for the legacy `action` / `actionLabel + onAction` shapes.
+ */
 
-type EmptyStateAction = {
-  label: string
-  onClick?: () => void
-  icon?: React.ReactNode
-  disabled?: boolean
-}
-
-type EmptyStateProps = {
-  title: string
-  description?: string
-  action?: EmptyStateAction
-  actionLabel?: string
-  onAction?: () => void
-  icon?: React.ReactNode
-  className?: string
-  actionLabelClassName?: string
-  children?: React.ReactNode
-}
+"use client"
 
-export function EmptyState({
-  title,
-  description,
-  action,
-  actionLabel,
-  onAction,
-  icon,
-  className,
-  actionLabelClassName,
-  children,
-}: EmptyStateProps) {
-  const resolvedAction = action ?? (actionLabel ? { label: actionLabel, onClick: onAction } : undefined)
-  return (
-    <div
-      className={cn(
-        'flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30 px-6 py-10 text-center',
-        className
-      )}
-    >
-      {icon ? <div className="mb-3 text-muted-foreground">{icon}</div> : null}
-      <p className="text-sm font-medium text-foreground">{title}</p>
-      {description ? <p className="mt-2 text-sm text-muted-foreground">{description}</p> : null}
-      {children}
-      {resolvedAction ? (
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={resolvedAction.onClick}
-          className={cn('mt-4 inline-flex items-center gap-2 text-foreground', actionLabelClassName)}
-          disabled={resolvedAction.disabled}
-        >
-          {(resolvedAction.icon ?? <Plus className="h-4 w-4" aria-hidden />)}
-          <span>{resolvedAction.label}</span>
-        </Button>
-      ) : null}
-    </div>
-  )
-}
+export { EmptyState } from '../primitives/empty-state'
+export type { EmptyStateProps } from '../primitives/empty-state'

package/src/backend/FilterOverlay.tsx

@@ -1,7 +1,10 @@
 "use client"
 import * as React from 'react'
+import { format } from 'date-fns'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
+import { DateRangePicker } from '../primitives/date-range-picker'
+import type { DateRange } from './date-range/dateRanges'
 import {
   Select,
   SelectContent,
@@ -227,28 +230,41 @@ export function FilterOverlay({
                       onChange={(e) => setValue(f.id, e.target.value || undefined)}
                     />
                   )}
-                  {f.type === 'dateRange' && (
-                    <div className="grid grid-cols-1 gap-2">
-                      <div>
-                        <div className="text-xs text-muted-foreground mb-1">{t('ui.filters.dateRange.from', 'From')}</div>
-                        <input
-                          type="date"
-                          className="w-full h-11 rounded border px-2 text-sm"
-                          value={values[f.id]?.from ?? ''}
-                          onChange={(e) => setValue(f.id, { ...(values[f.id] ?? {}), from: e.target.value || undefined })}
-                        />
-                      </div>
-                      <div>
-                        <div className="text-xs text-muted-foreground mb-1">{t('ui.filters.dateRange.to', 'To')}</div>
-                        <input
-                          type="date"
-                          className="w-full h-11 rounded border px-2 text-sm"
-                          value={values[f.id]?.to ?? ''}
-                          onChange={(e) => setValue(f.id, { ...(values[f.id] ?? {}), to: e.target.value || undefined })}
-                        />
-                      </div>
-                    </div>
-                  )}
+                  {f.type === 'dateRange' && (() => {
+                    const fromStr = values[f.id]?.from
+                    const toStr = values[f.id]?.to
+                    const parseISODate = (input: unknown): Date | null => {
+                      if (typeof input !== 'string' || !input.length) return null
+                      const candidate = new Date(input)
+                      return Number.isNaN(candidate.getTime()) ? null : candidate
+                    }
+                    const fromDate = parseISODate(fromStr)
+                    const toDate = parseISODate(toStr)
+                    const rangeValue: DateRange | null =
+                      fromDate && toDate
+                        ? { start: fromDate, end: toDate }
+                        : fromDate
+                          ? { start: fromDate, end: fromDate }
+                          : toDate
+                            ? { start: toDate, end: toDate }
+                            : null
+                    return (
+                      <DateRangePicker
+                        value={rangeValue}
+                        onChange={(next) => {
+                          if (!next) {
+                            setValue(f.id, { from: undefined, to: undefined })
+                            return
+                          }
+                          setValue(f.id, {
+                            from: format(next.start, 'yyyy-MM-dd'),
+                            to: format(next.end, 'yyyy-MM-dd'),
+                          })
+                        }}
+                        placeholder={t('ui.filters.dateRange.placeholder', 'Pick a date range')}
+                      />
+                    )
+                  })()}
                   {f.type === 'select' && (
                     <div className="space-y-1">
                       {f.multiple ? (

package/src/backend/FlashMessages.tsx

@@ -1,10 +1,16 @@
 "use client"
 import * as React from 'react'
-import { X } from 'lucide-react'
-import { IconButton } from '../primitives/icon-button'
+import { Alert, type AlertStatus } from '../primitives/alert'
 
 export type FlashKind = 'success' | 'error' | 'warning' | 'info'
 
+const flashKindToAlertStatus: Record<FlashKind, AlertStatus> = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'information',
+}
+
 // Programmatic API to show a flash message without navigation.
 // Consumers can import { flash } and call flash('text', 'error').
 export function flash(message: string, type: FlashKind = 'info') {
@@ -141,32 +147,25 @@ function FlashMessagesInner() {
     return () => window.removeEventListener('flash', handler as EventListener)
   }, [showFlash])
 
-  if (!msg) return null
+  const handleDismiss = React.useCallback(() => {
+    clearDismissTimer()
+    setMsg(null)
+  }, [clearDismissTimer])
 
-  const colorMap: Record<FlashKind, string> = {
-    success: 'bg-status-success-icon',
-    error: 'bg-status-error-icon',
-    warning: 'bg-status-warning-icon',
-    info: 'bg-status-info-icon',
-  }
-  const color = colorMap[kind]
+  if (!msg) return null
 
   return (
     <div className="pointer-events-none fixed left-3 right-3 top-3 z-toast sm:left-auto sm:right-4 sm:w-[380px]">
-      <div className={`pointer-events-auto rounded px-3 py-2 text-white shadow-md ${color}`}>
-        <div className="flex items-center justify-between gap-2">
-          <div className="text-sm">{msg}</div>
-          <IconButton
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="text-white/90 hover:text-white hover:bg-white/10"
-            onClick={() => setMsg(null)}
-            aria-label="Dismiss"
-          >
-            <X size={16} />
-          </IconButton>
-        </div>
+      <div className="pointer-events-auto">
+        <Alert
+          status={flashKindToAlertStatus[kind]}
+          size="sm"
+          dismissible
+          onDismiss={handleDismiss}
+          className="shadow-md"
+        >
+          {msg}
+        </Alert>
       </div>
     </div>
   )

package/src/backend/JsonBuilder.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
 import { Input } from '../primitives/input'
+import { InlineInput } from '../primitives/inline-input'
 import {
   Select,
   SelectContent,
@@ -327,8 +328,9 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                         <div key={idx} className="flex">
                             <div className="pt-2">
                                 {/* Key Renamer */}
-                                <input
-                                    className="w-full sm:w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus-visible:border-ring bg-transparent focus-visible:outline-none text-right pr-1"
+                                <InlineInput
+                                    className="w-full sm:w-[100px]"
+                                    inputClassName="text-right text-xs font-mono pr-1"
                                     value={key}
                                     onChange={(e) => handleKeyRename(key, e.target.value)}
                                     disabled={readOnly}

package/src/backend/LogList.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@open-mercato/ui/primitives/accordion'
+import { Badge, type BadgeProps } from '@open-mercato/ui/primitives/badge'
+
+export type LogListLevel = 'info' | 'warn' | 'warning' | 'error' | 'debug' | string
+
+export type LogListEntry = {
+  id: string
+  /** Pre-formatted timestamp (consumer formats with `formatDateTime()` / locale). */
+  time: React.ReactNode
+  /** Raw level value — drives the badge color via the built-in map. */
+  level: LogListLevel
+  /** Optional translated label override; falls back to `level` verbatim. */
+  levelLabel?: React.ReactNode
+  /** Trigger message (one-liner — truncates in the trigger row, full text available inside `body`). */
+  message: React.ReactNode
+  /** Body content rendered inside `AccordionContent` when expanded — typically a metadata grid + JSON payload. */
+  body: React.ReactNode
+}
+
+type LogLevelBadgeVariant = NonNullable<BadgeProps['variant']>
+
+const LOG_LEVEL_BADGE_VARIANT: Record<string, LogLevelBadgeVariant> = {
+  info: 'info',
+  warn: 'warning',
+  warning: 'warning',
+  error: 'error',
+  debug: 'neutral',
+}
+
+export type LogLevelBadgeProps = {
+  level: LogListLevel
+  label?: React.ReactNode
+  className?: string
+}
+
+export function LogLevelBadge({ level, label, className }: LogLevelBadgeProps) {
+  const key = typeof level === 'string' ? level.toLowerCase() : ''
+  const variant = LOG_LEVEL_BADGE_VARIANT[key] ?? 'secondary'
+  return (
+    <Badge variant={variant} className={className} data-log-level={key || undefined}>
+      {label ?? level}
+    </Badge>
+  )
+}
+
+export type LogListProps = {
+  entries: LogListEntry[]
+  /** Optional message rendered when the list is empty. Pass through `useT()` for i18n. */
+  emptyMessage?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Unified `Accordion`-driven log list for admin "logs" tabs (integrations,
+ * data sync runs, payment gateway transactions, …). Replaces the per-module
+ * `<table>` + `expandedLogId` row-expand pattern with a Figma-aligned card
+ * list that uses the DS `Accordion` primitive under the hood. Each row
+ * shows time + level badge + message in the trigger; the consumer controls
+ * the expanded body content (metadata grid, JSON payload, etc.).
+ *
+ * `type='single' collapsible` matches the previous "one expanded row at a
+ * time" behaviour. Switch to `Accordion` directly if you need multi-open.
+ */
+export function LogList({ entries, emptyMessage, className }: LogListProps) {
+  if (entries.length === 0) {
+    return emptyMessage ? (
+      <p className={cn('py-4 text-sm text-muted-foreground', className)} data-slot="log-list-empty">
+        {emptyMessage}
+      </p>
+    ) : null
+  }
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className={cn('space-y-2', className)}
+      data-slot="log-list"
+    >
+      {entries.map((entry) => (
+        <AccordionItem key={entry.id} value={entry.id} data-log-entry-id={entry.id}>
+          <AccordionTrigger triggerIcon="chevron">
+            <span className="grid w-full items-center gap-3 sm:grid-cols-[10rem_5rem_minmax(0,1fr)]">
+              <span className="truncate whitespace-nowrap text-xs text-muted-foreground sm:text-sm">
+                {entry.time}
+              </span>
+              <span className="justify-self-start">
+                <LogLevelBadge level={entry.level} label={entry.levelLabel} />
+              </span>
+              <span className="min-w-0 truncate text-left text-sm font-normal">
+                {entry.message}
+              </span>
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>{entry.body}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}

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

@@ -60,17 +60,20 @@ describe('CrudForm — datetime field types render correct picker component', ()
     expect(html).toContain('Pick a time')
   })
 
-  it('type: datetime-local renders raw <input> (backward compatibility)', () => {
+  it('type: datetime-local renders DateTimePicker trigger (DS unification — no native input)', () => {
     const fields: CrudField[] = [{ id: 'at', label: 'At', type: 'datetime-local' }]
     const html = renderForm(fields)
-    expect(html).toContain('type="datetime-local"')
-    expect(html).not.toContain('Pick date and time')
+    expect(html).toContain('aria-haspopup="dialog"')
+    expect(html).toContain('data-slot="date-picker-trigger"')
+    expect(html).not.toContain('type="datetime-local"')
   })
 
-  it('type: date renders raw <input type="date"> (backward compatibility)', () => {
+  it('type: date renders DatePicker trigger (DS unification — no native input)', () => {
     const fields: CrudField[] = [{ id: 'dt', label: 'Date', type: 'date' }]
     const html = renderForm(fields)
-    expect(html).toContain('type="date"')
+    expect(html).toContain('aria-haspopup="dialog"')
+    expect(html).toContain('data-slot="date-picker-trigger"')
+    expect(html).not.toContain('type="date"')
   })
 
   it('datepicker shows formatted date in trigger when initialValues provided', () => {
@@ -87,9 +90,11 @@ describe('CrudForm — datetime field types render correct picker component', ()
     expect(html).toContain('2026')
   })
 
-  it('time shows HH:MM in trigger when initialValues provided', () => {
+  it('time shows 12h-formatted value in trigger when initialValues provided', () => {
     const fields: CrudField[] = [{ id: 'sync_time', label: 'Sync Time', type: 'time' }]
     const html = renderForm(fields, { sync_time: '14:30' })
-    expect(html).toContain('14:30')
+    // Legacy TimePicker shim renders the trigger in 12h "HH:MM AM/PM" format to
+    // match the slot list inside the popover.
+    expect(html).toContain('02:30 PM')
   })
 })

package/src/backend/__tests__/FilterOverlay.dateRange.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { FilterOverlay, type FilterDef, type FilterValues } from '../FilterOverlay'
+
+function renderOverlay({
+  filters,
+  initialValues = {},
+  onApply = jest.fn(),
+  onClear = jest.fn(),
+}: {
+  filters: FilterDef[]
+  initialValues?: FilterValues
+  onApply?: (v: FilterValues) => void
+  onClear?: () => void
+}) {
+  return render(
+    <I18nProvider locale="en" dict={{}}>
+      <FilterOverlay
+        open={true}
+        onOpenChange={() => {}}
+        filters={filters}
+        initialValues={initialValues}
+        onApply={onApply}
+        onClear={onClear}
+      />
+    </I18nProvider>,
+  )
+}
+
+describe('FilterOverlay dateRange — DS unification (DateRangePicker swap)', () => {
+  const dateRangeFilter: FilterDef = {
+    id: 'createdRange',
+    label: 'Created',
+    type: 'dateRange',
+  }
+
+  it('renders the DateRangePicker primitive trigger (not raw <input type="date">)', () => {
+    renderOverlay({ filters: [dateRangeFilter] })
+    expect(document.querySelector('[data-slot="date-range-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="date"]')).toBeNull()
+  })
+
+  it('preserves the existing { from, to } string output shape on Apply (BC for consumers)', async () => {
+    const onApply = jest.fn()
+    renderOverlay({
+      filters: [dateRangeFilter],
+      initialValues: { createdRange: { from: '2026-05-01', to: '2026-05-09' } },
+      onApply,
+    })
+    // Apply existing values — output shape stays as { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' }.
+    // Multiple Apply buttons may exist (FilterOverlay top + DateRangePicker popover);
+    // pick the FilterOverlay top one (always rendered, popover may or may not be open).
+    const applyBtns = screen.getAllByRole('button', { name: /^apply$/i })
+    const overlayApply = applyBtns[0]
+    await act(async () => {
+      fireEvent.click(overlayApply)
+    })
+    expect(onApply).toHaveBeenCalledTimes(1)
+    const applied = onApply.mock.calls[0][0]
+    expect(applied.createdRange).toBeDefined()
+    expect(typeof applied.createdRange.from).toBe('string')
+    expect(typeof applied.createdRange.to).toBe('string')
+    expect(applied.createdRange.from).toBe('2026-05-01')
+    expect(applied.createdRange.to).toBe('2026-05-09')
+  })
+
+  it('renders the formatted range in the trigger when initial { from, to } is provided', () => {
+    renderOverlay({
+      filters: [dateRangeFilter],
+      initialValues: { createdRange: { from: '2026-05-01', to: '2026-05-09' } },
+    })
+    const trigger = document.querySelector('[data-slot="date-range-picker-trigger"]')
+    expect(trigger).toBeInTheDocument()
+    expect(trigger!.textContent).toContain('May')
+    expect(trigger!.textContent).toContain('2026')
+  })
+
+  it('handles empty / undefined values gracefully (no crash)', () => {
+    expect(() => {
+      renderOverlay({ filters: [dateRangeFilter], initialValues: {} })
+    }).not.toThrow()
+    expect(document.querySelector('[data-slot="date-range-picker-trigger"]')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,163 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { LogLevelBadge, LogList, type LogListEntry } from '../LogList'
+
+function makeEntry(over: Partial<LogListEntry> = {}): LogListEntry {
+  return {
+    id: 'log-1',
+    time: '2026-05-12 10:00',
+    level: 'info',
+    message: 'Sample log message',
+    body: <div data-testid="body-1">Body of log-1</div>,
+    ...over,
+  }
+}
+
+describe('LogLevelBadge', () => {
+  it('applies the info palette by default (semantic status tokens)', () => {
+    const { container } = render(<LogLevelBadge level="info" />)
+    const badge = container.firstElementChild as HTMLElement
+    expect(badge).toHaveAttribute('data-log-level', 'info')
+    expect(badge.className).toContain('bg-status-info-bg')
+    expect(badge.className).toContain('text-status-info-text')
+  })
+
+  it('maps warn / warning / error / debug to the matching semantic palette', () => {
+    const { rerender, container } = render(<LogLevelBadge level="warn" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'warn')
+    expect(container.firstElementChild!.className).toContain('bg-status-warning-bg')
+
+    rerender(<LogLevelBadge level="warning" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'warning')
+    expect(container.firstElementChild!.className).toContain('bg-status-warning-bg')
+
+    rerender(<LogLevelBadge level="error" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'error')
+    expect(container.firstElementChild!.className).toContain('bg-status-error-bg')
+
+    rerender(<LogLevelBadge level="debug" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'debug')
+    expect(container.firstElementChild!.className).toContain('bg-status-neutral-bg')
+  })
+
+  it('renders an unrecognized level without status palette classes (falls back to Badge secondary)', () => {
+    const { container } = render(<LogLevelBadge level="custom-level" />)
+    const badge = container.firstElementChild as HTMLElement
+    expect(badge).toHaveAttribute('data-log-level', 'custom-level')
+    expect(badge.className).not.toContain('bg-status-info-bg')
+    expect(badge.className).not.toContain('bg-status-warning-bg')
+    expect(badge.className).not.toContain('bg-status-error-bg')
+    expect(badge.className).not.toContain('bg-status-neutral-bg')
+    expect(badge.className).toContain('bg-secondary')
+  })
+
+  it('honors a custom label and falls back to level when label is omitted', () => {
+    const { rerender } = render(<LogLevelBadge level="info" label="Information" />)
+    expect(screen.getByText('Information')).toBeInTheDocument()
+
+    rerender(<LogLevelBadge level="error" />)
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+})
+
+describe('LogList', () => {
+  it('renders the empty message when entries are empty', () => {
+    render(<LogList entries={[]} emptyMessage="No log entries" />)
+    expect(screen.getByText('No log entries')).toBeInTheDocument()
+    expect(screen.getByText('No log entries').getAttribute('data-slot')).toBe('log-list-empty')
+  })
+
+  it('renders nothing when entries are empty and no empty message is provided', () => {
+    const { container } = render(<LogList entries={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders one accordion item per entry with time / level / message in the trigger', () => {
+    render(
+      <LogList
+        entries={[
+          makeEntry({ id: 'a', time: '10:00', level: 'info', message: 'Connected' }),
+          makeEntry({ id: 'b', time: '10:01', level: 'error', message: 'Timeout' }),
+        ]}
+      />,
+    )
+    expect(screen.getByText('Connected')).toBeInTheDocument()
+    expect(screen.getByText('Timeout')).toBeInTheDocument()
+    expect(screen.getByText('10:00')).toBeInTheDocument()
+    expect(screen.getByText('10:01')).toBeInTheDocument()
+    expect(screen.getByText('info')).toBeInTheDocument()
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+
+  it('forwards the entry id as data-log-entry-id on the AccordionItem', () => {
+    const { container } = render(
+      <LogList entries={[makeEntry({ id: 'log-42' })]} />,
+    )
+    expect(container.querySelector('[data-log-entry-id="log-42"]')).not.toBeNull()
+  })
+
+  it('hides each entry body until the trigger is clicked, then reveals it (single + collapsible)', () => {
+    const { container } = render(
+      <LogList
+        entries={[
+          makeEntry({ id: 'a', message: 'A' }),
+          makeEntry({ id: 'b', message: 'B' }),
+        ]}
+      />,
+    )
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'closed')
+
+    fireEvent.click(screen.getByRole('button', { name: /A/ }))
+    expect(items[0]).toHaveAttribute('data-state', 'open')
+    expect(items[1]).toHaveAttribute('data-state', 'closed')
+
+    fireEvent.click(screen.getByRole('button', { name: /B/ }))
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('uses the levelLabel override when provided (e.g. translated level text)', () => {
+    render(
+      <LogList
+        entries={[
+          makeEntry({ level: 'warn', levelLabel: 'Ostrzeżenie' }),
+        ]}
+      />,
+    )
+    expect(screen.getByText('Ostrzeżenie')).toBeInTheDocument()
+    expect(screen.queryByText('warn')).toBeNull()
+  })
+
+  it('supports ReactNode message + body slots (not just strings); body mounts on expand', () => {
+    render(
+      <LogList
+        entries={[
+          {
+            id: 'rich',
+            time: <span data-testid="time">10:00:01</span>,
+            level: 'info',
+            message: <span data-testid="message">Detailed event</span>,
+            body: <pre data-testid="body">JSON payload</pre>,
+          },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('time')).toBeInTheDocument()
+    expect(screen.getByTestId('message')).toBeInTheDocument()
+    // Radix lazy-mounts AccordionContent children — body appears only after the trigger is opened.
+    expect(screen.queryByTestId('body')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: /Detailed event/ }))
+    expect(screen.getByTestId('body')).toBeInTheDocument()
+  })
+
+  it('marks the root with data-slot="log-list"', () => {
+    const { container } = render(<LogList entries={[makeEntry()]} />)
+    expect(container.querySelector('[data-slot="log-list"]')).not.toBeNull()
+  })
+})