@freighttech/ui 0.13.18

package/src/backend/dynamic-table/__tests__/useStickyOffsets.test.ts

@@ -0,0 +1,106 @@
+import { computeStickyOffsets, ROW_HEADER_WIDTH } from '../hooks/index'
+import { createCellStore } from '../store/index'
+import type { ColumnDef } from '../types/index'
+
+/**
+ * Spec 0 / Phase 2 — sticky offset arithmetic.
+ *
+ * `computeStickyOffsets` is a pure calculation (no React state, no effects), so it
+ * can be called directly; `useStickyOffsets` is a thin memo wrapper over it (see
+ * useStickyOffsets.memo.test.tsx for the identity contract that keeps
+ * `VirtualRow`'s React.memo alive). It decides the `left` / `right` a pinned column is glued to.
+ * Note it reads widths from the STORE, not from the column objects it is handed —
+ * that is what makes a user's manual resize move the pinned columns with it.
+ * Get the arithmetic wrong and frozen columns leave a gap or overlap the row
+ * header, which is the exact symptom the ROW_HEADER_WIDTH constant documents.
+ */
+
+let nextKey = 0
+const col = (over: Partial<ColumnDef> = {}): ColumnDef => ({
+  data: `c${nextKey++}`,
+  width: 100,
+  ...over,
+})
+
+/** Offsets are only meaningful when the store knows the same columns. */
+function offsets(columns: ColumnDef[], rowHeaders = false) {
+  const store = createCellStore([], columns)
+  return computeStickyOffsets(columns, store, rowHeaders)
+}
+
+describe('computeStickyOffsets', () => {
+  it('returns undefined for every non-sticky column', () => {
+    const { leftOffsets, rightOffsets } = offsets([col(), col(), col()])
+
+    expect(leftOffsets).toEqual([undefined, undefined, undefined])
+    expect(rightOffsets).toEqual([undefined, undefined, undefined])
+  })
+
+  it('starts left offsets at 0 when there is no row-header column', () => {
+    expect(offsets([col({ sticky: 'left' })]).leftOffsets[0]).toBe(0)
+  })
+
+  it('starts left offsets after the row header when one is rendered', () => {
+    expect(offsets([col({ sticky: 'left' })], true).leftOffsets[0]).toBe(ROW_HEADER_WIDTH)
+  })
+
+  it('stacks consecutive left-sticky columns by their widths', () => {
+    const { leftOffsets } = offsets([
+      col({ sticky: 'left', width: 120 }),
+      col({ sticky: 'left', width: 80 }),
+      col(),
+    ])
+
+    expect(leftOffsets[0]).toBe(0)
+    expect(leftOffsets[1]).toBe(120)
+    expect(leftOffsets[2]).toBeUndefined()
+  })
+
+  it('does not count a non-sticky column between two pinned ones', () => {
+    // The gap column scrolls away underneath the pinned block, so it must not
+    // push the second pinned column to the right.
+    const { leftOffsets } = offsets([
+      col({ sticky: 'left', width: 100 }),
+      col({ width: 999 }),
+      col({ sticky: 'left', width: 50 }),
+    ])
+
+    expect(leftOffsets[0]).toBe(0)
+    expect(leftOffsets[2]).toBe(100)
+  })
+
+  it('measures right-sticky columns from the right edge, inwards', () => {
+    const { rightOffsets } = offsets([
+      col(),
+      col({ sticky: 'right', width: 90 }),
+      col({ sticky: 'right', width: 60 }),
+    ])
+
+    // The last column is flush right; the one before it clears that column's width.
+    expect(rightOffsets[2]).toBe(0)
+    expect(rightOffsets[1]).toBe(60)
+    expect(rightOffsets[0]).toBeUndefined()
+  })
+
+  it('tracks a manual resize, because widths come from the store', () => {
+    const columns = [col({ sticky: 'left', width: 100 }), col({ sticky: 'left', width: 80 })]
+    const store = createCellStore([], columns)
+    store.setColumnWidth(0, 300)
+
+    expect(computeStickyOffsets(columns, store, false).leftOffsets[1]).toBe(300)
+  })
+
+  it('falls back to the default width when a column declares none', () => {
+    const columns: ColumnDef[] = [
+      { data: 'a', sticky: 'left' },
+      { data: 'b', sticky: 'left' },
+    ]
+
+    // store.getColumnWidth() defaults to 100 for an unconfigured column.
+    expect(computeStickyOffsets(columns, createCellStore([], columns), false).leftOffsets[1]).toBe(100)
+  })
+
+  it('handles an empty column list', () => {
+    expect(offsets([], true)).toEqual({ leftOffsets: [], rightOffsets: [] })
+  })
+})

package/src/backend/dynamic-table/__tests__/widgetPane.test.tsx

@@ -0,0 +1,338 @@
+/**
+ * A dashboard widget rendered as pane content.
+ *
+ * What is actually worth pinning is the props CONTRACT — the pane builds
+ * `DashboardWidgetComponentProps` by hand, so a fake widget that records what it
+ * was handed is a truer test than any assertion about markup. The rest is
+ * degradation: three ways this can fail, three distinguishable outcomes, and in
+ * particular a failed chunk load that shows an ERROR rather than a spinner that
+ * never stops (the failure `lazyTable.tsx` exists to document).
+ *
+ * Unit companion to TC-APP-604 (widget renders in a slot), TC-APP-606 (settings
+ * persist on the owning slot) and TC-APP-609 (a removed widget degrades that
+ * pane only).
+ * Spec: .ai/specs/2026-08-17-split-view-workspace-composition.md
+ */
+
+import * as React from 'react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import type {
+  DashboardWidgetComponentProps,
+  DashboardWidgetModule,
+} from '@open-mercato/shared/modules/dashboard/widgets'
+import { WidgetPane } from '../split-view/WidgetPane'
+import { ContentRegistryProvider } from '../registry/ContentRegistryContext'
+import type { WidgetCatalogEntry } from '../registry/widgetCatalog'
+
+jest.mock('../../dashboard/widgetRegistry', () => ({
+  loadDashboardWidgetModule: jest.fn(),
+}))
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { loadDashboardWidgetModule } = require('../../dashboard/widgetRegistry') as {
+  loadDashboardWidgetModule: jest.Mock
+}
+
+// ── fixtures ────────────────────────────────────────────────────────────────
+
+const LOADER_KEY = 'invoicing:inflows:widget'
+const WIDGET_ID = 'invoicing.dashboard.inflows'
+const SLOT_ID = 'pane-7'
+
+const CATALOG_ENTRY: WidgetCatalogEntry = {
+  id: WIDGET_ID,
+  title: 'Wpływy',
+  description: null,
+  loaderKey: LOADER_KEY,
+  icon: null,
+  features: ['dashboards.view'],
+  moduleId: 'invoicing',
+  defaultSettings: { window: 30 },
+  defaultSize: 'md',
+  supportsRefresh: true,
+}
+
+const RENDER_CONTEXT = {
+  userId: 'user-1',
+  tenantId: 'tenant-1',
+  organizationId: 'org-1',
+  userName: 'Ada',
+  userEmail: 'ada@example.com',
+  userLabel: 'Ada',
+}
+
+/** Records every props object it was handed, so the contract can be asserted. */
+function makeFakeModule(overrides: Partial<DashboardWidgetModule<any>> = {}) {
+  const seen: DashboardWidgetComponentProps<any>[] = []
+  const module: DashboardWidgetModule<any> = {
+    metadata: { id: WIDGET_ID, title: 'Wpływy' },
+    Widget: (props: DashboardWidgetComponentProps<any>) => {
+      seen.push(props)
+      return (
+        <div data-testid="fake-widget">
+          <span data-testid="mode">{props.mode}</span>
+          <span data-testid="settings">{JSON.stringify(props.settings)}</span>
+          <button type="button" onClick={() => props.onSettingsChange({ window: 90 })}>
+            change
+          </button>
+        </div>
+      )
+    },
+    ...overrides,
+  }
+  return { module, seen }
+}
+
+function renderPane(
+  options: {
+    widgets?: WidgetCatalogEntry[]
+    ready?: boolean
+    existingLoaderKeys?: string[]
+    settings?: unknown
+    onSettingsChange?: (next: unknown) => void
+    overflowExtras?: React.ReactNode
+  } = {},
+) {
+  const value = {
+    widgets: options.widgets ?? [CATALOG_ENTRY],
+    context: RENDER_CONTEXT,
+    ready: options.ready ?? true,
+    loaderKeyExists: (key: string) => (options.existingLoaderKeys ?? []).includes(key),
+  }
+  return render(
+    <ContentRegistryProvider value={value}>
+      <WidgetPane
+        content={{
+          kind: 'widget',
+          widgetId: WIDGET_ID,
+          loaderKey: LOADER_KEY,
+          settings: options.settings,
+        }}
+        slotId={SLOT_ID}
+        onSettingsChange={options.onSettingsChange}
+        overflowExtras={options.overflowExtras}
+      />
+    </ContentRegistryProvider>,
+  )
+}
+
+beforeEach(() => {
+  loadDashboardWidgetModule.mockReset()
+})
+
+// ── tests ───────────────────────────────────────────────────────────────────
+
+describe('WidgetPane — rendering', () => {
+  it('TC-APP-604 renders the widget in view mode with a layout item synthesized from the slot', async () => {
+    const { module, seen } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    renderPane()
+
+    await screen.findByTestId('fake-widget')
+    expect(loadDashboardWidgetModule).toHaveBeenCalledWith(LOADER_KEY)
+
+    const props = seen[seen.length - 1]
+    expect(props.mode).toBe('view')
+    // The slot is the identity: two panes of one widget must not share it.
+    expect(props.layout).toMatchObject({ id: SLOT_ID, widgetId: WIDGET_ID, order: 0 })
+    expect(props.context).toEqual(RENDER_CONTEXT)
+    expect(typeof props.refreshToken).toBe('number')
+  })
+
+  it('TC-APP-604 shows the widget title in the pane header', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    renderPane()
+
+    await screen.findByTestId('fake-widget')
+    expect(screen.getByText('Wpływy')).toBeTruthy()
+  })
+
+  it('bumps refreshToken when the header refresh is pressed', async () => {
+    const { module, seen } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    const { container } = renderPane()
+    await screen.findByTestId('fake-widget')
+    const before = seen[seen.length - 1].refreshToken
+
+    fireEvent.click(container.querySelector('[data-pane-widget-refresh]')!)
+
+    await waitFor(() => {
+      expect(seen[seen.length - 1].refreshToken).toBe(before + 1)
+    })
+  })
+})
+
+describe('WidgetPane — settings', () => {
+  it('passes the widget its default settings when the slot carries none', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    renderPane()
+
+    await screen.findByTestId('fake-widget')
+    expect(screen.getByTestId('settings').textContent).toBe(JSON.stringify({ window: 30 }))
+  })
+
+  it('TC-APP-606 prefers the settings stored on the slot over the catalogue defaults', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    renderPane({ settings: { window: 7 } })
+
+    await screen.findByTestId('fake-widget')
+    expect(screen.getByTestId('settings').textContent).toBe(JSON.stringify({ window: 7 }))
+  })
+
+  it('runs stored settings through hydrateSettings when the module declares it', async () => {
+    const { module } = makeFakeModule({
+      hydrateSettings: (raw: unknown) => ({ ...(raw as object), hydrated: true }),
+    })
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    renderPane({ settings: { window: 7 } })
+
+    await screen.findByTestId('fake-widget')
+    expect(JSON.parse(screen.getByTestId('settings').textContent!)).toEqual({
+      window: 7,
+      hydrated: true,
+    })
+  })
+
+  it('falls back to the raw settings when hydrateSettings throws, rather than blanking the widget', async () => {
+    const { module } = makeFakeModule({
+      hydrateSettings: () => {
+        throw new Error('bad shape')
+      },
+    })
+    loadDashboardWidgetModule.mockResolvedValue(module)
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+    try {
+      renderPane({ settings: { window: 7 } })
+      await screen.findByTestId('fake-widget')
+      expect(screen.getByTestId('settings').textContent).toBe(JSON.stringify({ window: 7 }))
+    } finally {
+      warn.mockRestore()
+    }
+  })
+
+  it('TC-APP-606 propagates a settings change to the host so it can persist on the slot', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+    const onSettingsChange = jest.fn()
+
+    renderPane({ onSettingsChange })
+
+    await screen.findByTestId('fake-widget')
+    fireEvent.click(screen.getByText('change'))
+
+    expect(onSettingsChange).toHaveBeenCalledWith({ window: 90 })
+  })
+
+  it('TC-APP-606 dehydrates settings before handing them to the host', async () => {
+    const { module } = makeFakeModule({
+      dehydrateSettings: (settings: any) => ({ w: settings.window }),
+    })
+    loadDashboardWidgetModule.mockResolvedValue(module)
+    const onSettingsChange = jest.fn()
+
+    renderPane({ onSettingsChange })
+
+    await screen.findByTestId('fake-widget')
+    fireEvent.click(screen.getByText('change'))
+
+    expect(onSettingsChange).toHaveBeenCalledWith({ w: 90 })
+  })
+})
+
+describe('WidgetPane — degradation', () => {
+  it('TC-APP-609 says a widget is gone when it is in neither the catalogue nor the build', async () => {
+    const { container } = renderPane({ widgets: [], existingLoaderKeys: [] })
+
+    expect(container.querySelector('[data-pane-status="unknown"]')).toBeTruthy()
+    expect(screen.getByText(/no longer available/i)).toBeTruthy()
+    // Nothing else: no header, no spinner, no attempt to load the chunk.
+    expect(loadDashboardWidgetModule).not.toHaveBeenCalled()
+    expect(container.querySelector('[data-pane-widget-header]')).toBeNull()
+  })
+
+  it('TC-APP-609 says access is missing when the widget still exists but was not granted', () => {
+    const { container } = renderPane({ widgets: [], existingLoaderKeys: [LOADER_KEY] })
+
+    expect(container.querySelector('[data-pane-status="denied"]')).toBeTruthy()
+    expect(loadDashboardWidgetModule).not.toHaveBeenCalled()
+  })
+
+  it('shows a spinner, not a verdict, while the catalogue is still in flight', () => {
+    const { container } = renderPane({ widgets: [], ready: false })
+
+    expect(container.querySelector('[data-pane-status="loading"]')).toBeTruthy()
+    expect(container.querySelector('[data-pane-status="denied"]')).toBeNull()
+    expect(container.querySelector('[data-pane-status="unknown"]')).toBeNull()
+  })
+
+  it('shows an ERROR when the chunk fails to load — never a spinner that waits forever', async () => {
+    loadDashboardWidgetModule.mockRejectedValue(new Error('chunk 404'))
+    const error = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    try {
+      const { container } = renderPane()
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-pane-widget-error]')).toBeTruthy()
+      })
+      expect(screen.getByRole('alert').textContent).toMatch(/could not be loaded/i)
+      expect(container.querySelector('[data-pane-widget-loading]')).toBeNull()
+    } finally {
+      error.mockRestore()
+    }
+  })
+
+  it('shows the same error when the loader key resolves to no module at all', async () => {
+    // `loadDashboardWidgetModule` returns null for an unregistered key rather
+    // than throwing, so a null resolution must reach the same visible outcome.
+    loadDashboardWidgetModule.mockResolvedValue(null)
+
+    const { container } = renderPane()
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-pane-widget-error]')).toBeTruthy()
+    })
+  })
+})
+
+describe('WidgetPane — host chrome', () => {
+  it('renders host overflow rows behind one menu button, costing no extra pane height', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    const { container } = renderPane({
+      overflowExtras: <button type="button">Close pane</button>,
+    })
+
+    await screen.findByTestId('fake-widget')
+    const trigger = container.querySelector('[data-pane-widget-menu-btn]')
+    expect(trigger).toBeTruthy()
+    // Collapsed by default — the rows cost nothing until asked for.
+    expect(document.querySelector('[data-pane-widget-menu]')).toBeNull()
+
+    fireEvent.click(trigger!)
+
+    expect(document.querySelector('[data-pane-widget-menu]')).toBeTruthy()
+    expect(screen.getByText('Close pane')).toBeTruthy()
+  })
+
+  it('omits the menu button entirely when the host passes no rows', async () => {
+    const { module } = makeFakeModule()
+    loadDashboardWidgetModule.mockResolvedValue(module)
+
+    const { container } = renderPane()
+
+    await screen.findByTestId('fake-widget')
+    expect(container.querySelector('[data-pane-widget-menu-btn]')).toBeNull()
+  })
+})

package/src/backend/dynamic-table/components/ActiveFilterChips.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import { getOperatorsForType, needsValueInput, type FilterOperator } from '../types/filters';
+import type { ColumnDef, FilterRow } from '../types/index';
+
+/**
+ * The live quick filters, named — one chip each, in the toolbar row that is
+ * already there.
+ *
+ * WHY IT EXISTS: before this, "Clear all filters (3)" was the ONLY toolbar
+ * evidence that the grid was narrowed, and it says how MANY rules are running,
+ * never which. Answering "why am I not seeing that shipment?" meant opening the
+ * Configure View drawer. The chips answer it in place, and each one removes its
+ * own rule without touching the others — which "Clear all" cannot do.
+ *
+ * WHY IT ADDS NO ROW: the strip renders INSIDE `.hot-toolbar-actions`,
+ * immediately before the clear-all button, and scrolls horizontally when the
+ * rules outgrow it (`.hot-filter-chips` in `styles/SearchBar.css`). The grid's
+ * height math is a density budget — a second row of chrome would spend rows per
+ * screen, which is the thing these tables exist to maximise.
+ *
+ * ONE CHIP FORM. Every filter that reaches here is ad-hoc and TEMPORARY: quick
+ * filters are never written to the saved view (A2/D6), so there is no
+ * "saved filter" chip to distinguish. A second variant would be a state the
+ * product cannot produce.
+ */
+
+export type ActiveFilterChipsProps = {
+  /** The grid's live filter rows — the same array `Clear all` empties. */
+  filters: FilterRow[];
+  /**
+   * Columns used only to name a field. Pass the BASE column set, not the
+   * visible one: a filter on a column the user has since hidden is exactly the
+   * filter that most needs naming.
+   */
+  columns: ColumnDef[];
+  /** Remove one rule, by `FilterRow.id`. */
+  onRemove: (filterId: string) => void;
+};
+
+/**
+ * Operator → English fallback, flattened once from the same source the filter
+ * editors read, so a chip can never disagree with the popover that wrote the
+ * rule about what an operator is called.
+ */
+const OPERATOR_FALLBACKS: Record<string, string> = (() => {
+  const out: Record<string, string> = {};
+  for (const type of ['text', 'numeric', 'boolean', 'date'] as const) {
+    for (const op of getOperatorsForType(type)) out[op.value] = op.label;
+  }
+  return out;
+})();
+
+type Translate = ReturnType<typeof useT>;
+
+/** What the chip says after the field name. Never longer than the chip. */
+function ruleSummary(t: Translate, rule: FilterRow): string {
+  const operatorLabel = t(
+    `dynamicTable.filter.operator.${rule.operator}`,
+    OPERATOR_FALLBACKS[rule.operator] ?? rule.operator,
+  );
+  // Value-less operators ("is empty", "overdue") ARE the summary.
+  if (!needsValueInput(rule.operator as FilterOperator)) return operatorLabel;
+  const values = (rule.values ?? []).map((v) => String(v ?? '')).filter(Boolean);
+  // A rule the user opened but never filled still narrows nothing — say so
+  // rather than showing an empty chip that looks like a rendering bug.
+  if (values.length === 0) return t('dynamicTable.filter.anyValue', 'any');
+  return values.join(', ');
+}
+
+export const ActiveFilterChips: React.FC<ActiveFilterChipsProps> = ({ filters, columns, onRemove }) => {
+  const t = useT();
+  if (!filters.length) return null;
+
+  return (
+    <div className="hot-filter-chips" role="list" data-filter-chips="">
+      {filters.map((rule) => {
+        const label = columns.find((c) => c.data === rule.field)?.title ?? rule.field;
+        const summary = ruleSummary(t, rule);
+        return (
+          <span
+            key={rule.id}
+            className="hot-filter-chip"
+            role="listitem"
+            data-filter-chip={rule.field}
+            title={`${label}: ${summary}`}
+          >
+            <span className="hot-filter-chip-label">{label}</span>
+            <span className="hot-filter-chip-value">{summary}</span>
+            {/* The trailing "×" lives INSIDE the chip — an M3 input chip, not a
+                chip plus a second bordered button beside it. */}
+            <button
+              type="button"
+              className="hot-filter-chip-remove"
+              data-filter-chip-remove={rule.field}
+              aria-label={t('dynamicTable.filter.removeFilter', 'Remove filter: {label}', { label })}
+              onClick={() => onRemove(rule.id)}
+            >
+              <X size={11} strokeWidth={2.25} aria-hidden="true" />
+            </button>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ActiveFilterChips;

package/src/backend/dynamic-table/components/BulkActionsBar.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import React from 'react';
+import { Trash2, Copy } from 'lucide-react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import type { BulkActionConfig } from '../types/index';
+import type { ExportFormat } from '../utils/exportTable';
+import ExportMenu from './ExportMenu';
+
+export interface BulkActionsBarProps {
+  /** Number of currently selected rows. */
+  count: number;
+  /** Disables the actions while a bulk operation is in flight. */
+  busy?: boolean;
+  /** Copy the selected rows to the clipboard (TSV). Available for every table. */
+  onCopy: () => void;
+  /**
+   * Run the batch delete over the selected rows. Optional — some tables don't
+   * support deletion, in which case the Delete action is hidden (Copy stays).
+   */
+  onDelete?: () => void;
+  /**
+   * Export the selected rows to CSV/Excel. Optional — omitted when the table
+   * disables export, in which case the Export action is hidden.
+   */
+  onExport?: (format: ExportFormat) => void;
+  /** Clear the whole selection (deselect all). */
+  onClear: () => void;
+  /** Per-table custom batch actions, appended after Copy/Delete. */
+  actions?: BulkActionConfig[];
+  /** The currently-selected row ids — passed to each custom action's callbacks. */
+  selectedIds?: string[];
+}
+
+/**
+ * Grouped-actions bar (Figma Frame 546:12289). Sits below the perspective tabs
+ * and above the column headers; shown whenever ≥1 row is selected. Carries Copy
+ * (always) and Delete (when supported), plus the count + deselect-all.
+ */
+const BulkActionsBar: React.FC<BulkActionsBarProps> = ({ count, busy, onCopy, onDelete, onExport, onClear, actions, selectedIds }) => {
+  const t = useT();
+  const ids = selectedIds ?? [];
+  return (
+    <div className="hot-bulk-bar" role="toolbar" aria-label={t('dynamicTable.bulk.ariaLabel', 'Bulk actions')}>
+      <input
+        type="checkbox"
+        className="hot-row-select hot-bulk-bar-checkbox"
+        checked
+        readOnly
+        onClick={onClear}
+        aria-label={t('dynamicTable.bulk.clear', 'Deselect all')}
+      />
+      <span className="hot-bulk-bar-count">
+        {count} {t('dynamicTable.bulk.selected', 'selected')}
+      </span>
+      <button type="button" className="hot-bulk-bar-action" onClick={onCopy} disabled={busy}>
+        <Copy size={12} aria-hidden="true" />
+        <span>{t('dynamicTable.bulk.copy', 'Copy')}</span>
+      </button>
+      {onExport && <ExportMenu variant="bulk" onExport={onExport} disabled={busy} />}
+      {onDelete && (
+        <button type="button" className="hot-bulk-bar-action" onClick={onDelete} disabled={busy}>
+          <Trash2 size={12} aria-hidden="true" />
+          <span>{t('dynamicTable.bulk.delete', 'Delete')}</span>
+        </button>
+      )}
+      {actions?.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          className="hot-bulk-bar-action"
+          onClick={() => action.onClick(ids)}
+          disabled={busy || action.disabled?.(ids)}
+        >
+          {action.icon}
+          <span>{action.label}</span>
+        </button>
+      ))}
+      <div className="hot-bulk-bar-spacer" />
+      <button type="button" className="hot-bulk-bar-clear" onClick={onClear} disabled={busy}>
+        {t('dynamicTable.bulk.clear', 'Deselect all')}
+      </button>
+    </div>
+  );
+};
+
+BulkActionsBar.displayName = 'BulkActionsBar';
+
+export default BulkActionsBar;