@polderlabs/bizar 6.2.5 → 7.0.0

package/bizar-dash/tests/ui/controls/RadioGroup.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RadioGroup } from '../../../src/web/ui/controls/RadioGroup';
+
+const OPTIONS = [
+  { value: 'a', label: 'Alpha' },
+  { value: 'b', label: 'Beta', description: 'B-description' },
+  { value: 'c', label: 'Gamma', disabled: true },
+];
+
+describe('RadioGroup', () => {
+  it('renders a radiogroup with the options', () => {
+    render(<RadioGroup name="g" value="a" onChange={() => {}} options={OPTIONS} />);
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Alpha' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /Beta/ })).toBeInTheDocument();
+  });
+
+  it('marks the controlled option as checked', () => {
+    render(
+      <RadioGroup name="g" value="b" onChange={() => {}} options={OPTIONS} />,
+    );
+    expect(screen.getByRole('radio', { name: /Beta/ })).toBeChecked();
+  });
+
+  it('fires onChange with the chosen value', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <RadioGroup name="g" value="a" onChange={onChange} options={OPTIONS} />,
+    );
+    await user.click(screen.getByRole('radio', { name: /Beta/ }));
+    expect(onChange).toHaveBeenCalledWith('b');
+  });
+
+  it('respects the disabled option', () => {
+    render(
+      <RadioGroup name="g" value="a" onChange={() => {}} options={OPTIONS} />,
+    );
+    const gamma = screen.getByRole('radio', { name: /Gamma/ });
+    expect(gamma).toBeDisabled();
+  });
+
+  it('applies the horizontal orientation class', () => {
+    render(
+      <RadioGroup
+        name="g"
+        value="a"
+        onChange={() => {}}
+        options={OPTIONS}
+        orientation="horizontal"
+        data-testid="rg"
+      />,
+    );
+    expect(screen.getByTestId('rg')).toHaveClass('radio-group-horizontal');
+  });
+});

package/bizar-dash/tests/ui/controls/SearchInput.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SearchInput } from '../../../src/web/ui/controls/SearchInput';
+
+describe('SearchInput', () => {
+  it('renders a searchbox with the value', () => {
+    render(<SearchInput value="hi" onChange={() => {}} />);
+    const input = screen.getByRole('searchbox');
+    expect(input).toHaveValue('hi');
+  });
+
+  it('fires onChange when typing', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<SearchInput value="" onChange={onChange} />);
+    await user.type(screen.getByRole('searchbox'), 'a');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('shows a clear button when value is non-empty and clears on click', async () => {
+    const onChange = vi.fn();
+    const onClear = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchInput
+        value="something"
+        onChange={onChange}
+        onClear={onClear}
+      />,
+    );
+    const clearBtn = screen.getByRole('button', { name: 'Clear search' });
+    await user.click(clearBtn);
+    expect(onChange).toHaveBeenCalledWith('');
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not show a clear button when value is empty', () => {
+    render(<SearchInput value="" onChange={() => {}} />);
+    expect(
+      screen.queryByRole('button', { name: 'Clear search' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(<SearchInput value="x" onChange={() => {}} disabled />);
+    expect(screen.getByRole('searchbox')).toBeDisabled();
+    expect(
+      screen.queryByRole('button', { name: 'Clear search' }),
+    ).not.toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/controls/Select.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select } from '../../../src/web/ui/controls/Select';
+
+const OPTIONS = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B' },
+  { value: 'c', label: 'C', disabled: true },
+];
+
+describe('Select', () => {
+  it('renders all options', () => {
+    render(<Select value="" onChange={() => {}} options={OPTIONS} />);
+    expect(screen.getByRole('option', { name: 'A' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'B' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'C' })).toBeInTheDocument();
+  });
+
+  it('renders a disabled placeholder option when placeholder is provided', () => {
+    render(
+      <Select value="" onChange={() => {}} options={OPTIONS} placeholder="Pick…" />,
+    );
+    const placeholder = screen.getByRole('option', { name: 'Pick…' });
+    expect(placeholder).toBeDisabled();
+  });
+
+  it('fires onChange when an option is selected', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Select value="" onChange={onChange} options={OPTIONS} />);
+    await user.selectOptions(screen.getByRole('combobox'), 'b');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('reflects the controlled value', () => {
+    render(<Select value="a" onChange={() => {}} options={OPTIONS} />);
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(select.value).toBe('a');
+  });
+
+  it('applies size modifier', () => {
+    render(
+      <Select
+        value=""
+        onChange={() => {}}
+        options={OPTIONS}
+        inputSize="sm"
+        data-testid="s"
+      />,
+    );
+    expect(screen.getByTestId('s')).toHaveClass('select-size-sm');
+  });
+
+  it('sets aria-invalid when error is provided', () => {
+    render(
+      <Select
+        value=""
+        onChange={() => {}}
+        options={OPTIONS}
+        error="required"
+      />,
+    );
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'true');
+  });
+});

package/bizar-dash/tests/ui/controls/Slider.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Slider } from '../../../src/web/ui/controls/Slider';
+
+describe('Slider', () => {
+  it('renders a slider with the supplied value', () => {
+    render(<Slider value={20} onChange={() => {}} />);
+    const input = screen.getByRole('slider') as HTMLInputElement;
+    expect(input.value).toBe('20');
+  });
+
+  it('fires onChange with a number when the value changes', () => {
+    const onChange = vi.fn();
+    render(<Slider value={0} onChange={onChange} min={0} max={10} />);
+    const input = screen.getByRole('slider') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '5' } });
+    expect(onChange).toHaveBeenCalled();
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0];
+    expect(typeof lastCall).toBe('number');
+    expect(lastCall).toBe(5);
+  });
+
+  it('renders the label and value readout when showValue is true', () => {
+    render(<Slider value={42} onChange={() => {}} label="Volume" showValue />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('forwards min/max/step to the native input', () => {
+    render(<Slider value={1} onChange={() => {}} min={0} max={10} step={2} />);
+    const input = screen.getByRole('slider') as HTMLInputElement;
+    expect(input.min).toBe('0');
+    expect(input.max).toBe('10');
+    expect(input.step).toBe('2');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(<Slider value={1} onChange={() => {}} disabled />);
+    expect(screen.getByRole('slider')).toBeDisabled();
+  });
+});

package/bizar-dash/tests/ui/controls/TextInput.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextInput } from '../../../src/web/ui/controls/TextInput';
+
+describe('TextInput', () => {
+  it('renders and accepts typed input', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<TextInput value="" onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'hello');
+    expect(onChange).toHaveBeenCalled();
+    expect(input).toBeInTheDocument();
+  });
+
+  it('applies the size modifier class', () => {
+    render(<TextInput value="" onChange={() => {}} inputSize="lg" />);
+    expect(screen.getByRole('textbox').parentElement).toHaveClass('field-size-lg');
+  });
+
+  it('marks itself aria-invalid when error is set', () => {
+    render(<TextInput value="" onChange={() => {}} error="Required" />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveClass('field-error');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(<TextInput value="" onChange={() => {}} disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('renders leftIcon when provided', () => {
+    render(
+      <TextInput
+        value=""
+        onChange={() => {}}
+        leftIcon={<span data-testid="icon">L</span>}
+      />,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/controls/Toggle.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Toggle } from '../../../src/web/ui/controls/Toggle';
+
+describe('Toggle', () => {
+  it('renders as a switch with checked state', () => {
+    render(<Toggle checked onChange={() => {}} />);
+    const input = screen.getByRole('switch');
+    expect(input).toBeChecked();
+  });
+
+  it('fires onChange(true) when clicked off→on', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Toggle checked={false} onChange={onChange} />);
+    await user.click(screen.getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('renders with the checked class on the label', () => {
+    render(<Toggle checked onChange={() => {}} data-testid="t" />);
+    expect(screen.getByTestId('t')).toHaveClass('toggle-checked');
+  });
+
+  it('renders the small size modifier class', () => {
+    render(
+      <Toggle checked={false} onChange={() => {}} size="sm" data-testid="t" />,
+    );
+    expect(screen.getByTestId('t')).toHaveClass('toggle-sm');
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(
+      <Toggle checked={false} onChange={() => {}} disabled />,
+    );
+    expect(screen.getByRole('switch')).toBeDisabled();
+  });
+});

package/bizar-dash/tests/ui/data/BarChart.test.tsx

@@ -0,0 +1,55 @@
+// tests/ui/data/BarChart.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { BarChart } from '../../../src/web/ui/data/BarChart';
+
+const DATA = [
+  { label: 'Tasks', value: 12 },
+  { label: 'Agents', value: 4 },
+  { label: 'Mods', value: 8, color: 'var(--chart-2)' },
+];
+
+describe('BarChart', () => {
+  it('renders one row per datum with label + value', () => {
+    render(<BarChart data={DATA} />);
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Agents')).toBeInTheDocument();
+    expect(screen.getByText('Mods')).toBeInTheDocument();
+    expect(screen.getByText('12')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('8')).toBeInTheDocument();
+  });
+
+  it('bar widths are scaled to the max value when maxValue is omitted', () => {
+    const { container } = render(<BarChart data={DATA} />);
+    const bars = container.querySelectorAll('.bd-bar-chart__bar');
+    expect(bars.length).toBe(3);
+    const widths = Array.from(bars).map((b) => b.getAttribute('style') ?? '');
+    // Tasks 12 → 100%, Agents 4 → ~33.3%, Mods 8 → ~66.7%.
+    // Floating-point rounding means the exact substring may have many
+    // decimals, so use coarse matches.
+    expect(widths[0]).toMatch(/width:\s*100(?:\.0+)?%/);
+    expect(widths[1]).toMatch(/width:\s*33\.3+%/);
+    expect(widths[2]).toMatch(/width:\s*66\.6+%/);
+  });
+
+  it('honours an explicit maxValue', () => {
+    const { container } = render(<BarChart data={DATA} maxValue={24} />);
+    const first = container.querySelector('.bd-bar-chart__bar');
+    expect(first?.getAttribute('style')).toContain('50%');
+  });
+
+  it('applies per-bar colour overrides', () => {
+    const { container } = render(<BarChart data={DATA} />);
+    const bars = container.querySelectorAll('.bd-bar-chart__bar');
+    expect(bars[0]).toHaveStyle({ background: 'var(--chart-1)' });
+    expect(bars[2]).toHaveStyle({ background: 'var(--chart-2)' });
+  });
+
+  it('hides labels and value header when showLabels is false', () => {
+    render(<BarChart data={DATA} showLabels={false} />);
+    expect(screen.queryByText('Tasks')).toBeNull();
+    expect(screen.queryByText('12')).toBeNull();
+  });
+});

package/bizar-dash/tests/ui/data/DataTable.test.tsx

@@ -0,0 +1,112 @@
+// tests/ui/data/DataTable.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { DataTable, type DataTableColumn } from '../../../src/web/ui/data/DataTable';
+
+type Row = { id: string; name: string; score: number };
+
+const COLUMNS: DataTableColumn<Row>[] = [
+  { key: 'name', header: 'Name', sortable: true, accessor: (r) => r.name },
+  { key: 'score', header: 'Score', sortable: true, align: 'right', accessor: (r) => r.score },
+];
+
+const DATA: Row[] = [
+  { id: '1', name: 'Charlie', score: 88 },
+  { id: '2', name: 'Alice', score: 92 },
+  { id: '3', name: 'Bob', score: 75 },
+];
+
+describe('DataTable', () => {
+  it('renders one row per datum with cells in column order', () => {
+    render(<DataTable columns={COLUMNS} data={DATA} rowKey={(r) => r.id} />);
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('88')).toBeInTheDocument();
+    expect(screen.getByText('92')).toBeInTheDocument();
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  it('sorts asc on header click, then desc on a second click', async () => {
+    render(<DataTable columns={COLUMNS} data={DATA} rowKey={(r) => r.id} />);
+    const header = screen.getByText('Name');
+    await userEvent.click(header);
+    // Names now in ascending alpha order.
+    let tbody = screen.getAllByRole('row').slice(1);
+    expect(tbody[0]).toHaveTextContent('Alice');
+    expect(tbody[2]).toHaveTextContent('Charlie');
+
+    await userEvent.click(header);
+    tbody = screen.getAllByRole('row').slice(1);
+    expect(tbody[0]).toHaveTextContent('Charlie');
+    expect(tbody[2]).toHaveTextContent('Alice');
+  });
+
+  it('sorts numeric columns correctly', async () => {
+    render(<DataTable columns={COLUMNS} data={DATA} rowKey={(r) => r.id} />);
+    await userEvent.click(screen.getByText('Score'));
+    const rows = screen.getAllByRole('row').slice(1);
+    // Asc numeric: 75 → 88 → 92 (Bob, Charlie, Alice)
+    expect(rows[0]).toHaveTextContent('Bob');
+    expect(rows[2]).toHaveTextContent('Alice');
+  });
+
+  it('renders the empty placeholder when data is empty', () => {
+    render(<DataTable columns={COLUMNS} data={[]} rowKey={(r) => r.id} empty="Nothing here" />);
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  it('renders the default "No data" when empty is omitted', () => {
+    render(<DataTable columns={COLUMNS} data={[]} rowKey={(r) => r.id} />);
+    expect(screen.getByText('No data')).toBeInTheDocument();
+  });
+
+  it('renders skeleton rows when loading', () => {
+    const { container } = render(
+      <DataTable columns={COLUMNS} data={DATA} rowKey={(r) => r.id} loading />,
+    );
+    expect(container.querySelectorAll('.bd-data-table__skeleton-row').length).toBeGreaterThan(0);
+  });
+
+  it('fires onRowClick when a row is clicked', async () => {
+    const onRowClick = vi.fn();
+    render(
+      <DataTable
+        columns={COLUMNS}
+        data={DATA}
+        rowKey={(r) => r.id}
+        onRowClick={onRowClick}
+      />,
+    );
+    await userEvent.click(screen.getByText('Alice'));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick.mock.calls[0][0]).toMatchObject({ id: '2', name: 'Alice' });
+  });
+
+  it('applies align + width attributes to columns', () => {
+    const { container } = render(
+      <DataTable columns={COLUMNS} data={DATA} rowKey={(r) => r.id} />,
+    );
+    const headers = container.querySelectorAll('th');
+    const scoreHeader = Array.from(headers).find((h) =>
+      h.textContent?.includes('Score'),
+    );
+    expect(scoreHeader).toHaveClass('bd-data-table__th--right');
+  });
+
+  it('uses onSortChange callback when provided', async () => {
+    const onSortChange = vi.fn();
+    render(
+      <DataTable
+        columns={COLUMNS}
+        data={DATA}
+        rowKey={(r) => r.id}
+        onSortChange={onSortChange}
+      />,
+    );
+    await userEvent.click(screen.getByText('Name'));
+    expect(onSortChange).toHaveBeenCalledWith({ key: 'name', direction: 'asc' });
+  });
+});

package/bizar-dash/tests/ui/data/EmptyState.test.tsx

@@ -0,0 +1,57 @@
+// tests/ui/data/EmptyState.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Inbox } from 'lucide-react';
+import { EmptyState } from '../../../src/web/ui/data/EmptyState';
+
+describe('EmptyState', () => {
+  it('renders the title', () => {
+    render(<EmptyState title="Nothing here yet" />);
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
+  });
+
+  it('renders the description when provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        description="Add a thing to get started"
+      />,
+    );
+    expect(screen.getByText('Add a thing to get started')).toBeInTheDocument();
+  });
+
+  it('renders a custom icon when provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        icon={<Inbox data-testid="empty-icon" />}
+      />,
+    );
+    expect(screen.getByTestId('empty-icon')).toBeInTheDocument();
+  });
+
+  it('renders a default lucide icon when none is provided', () => {
+    const { container } = render(<EmptyState title="Empty" />);
+    // Default is a Cloud icon — assert the icon slot exists at minimum.
+    expect(container.querySelector('.bd-state__icon')).toBeInTheDocument();
+  });
+
+  it('renders an action button that fires onClick', async () => {
+    const onClick = vi.fn();
+    render(
+      <EmptyState
+        title="Empty"
+        action={{ label: 'Add item', onClick }}
+      />,
+    );
+    await userEvent.click(screen.getByText('Add item'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports inline mode (no large centred padding)', () => {
+    const { container } = render(<EmptyState title="Empty" inline />);
+    expect(container.querySelector('.bd-state--inline')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/data/ErrorState.test.tsx

@@ -0,0 +1,47 @@
+// tests/ui/data/ErrorState.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ErrorState } from '../../../src/web/ui/data/ErrorState';
+
+describe('ErrorState', () => {
+  it('renders the default title when none is provided', () => {
+    render(<ErrorState error="boom" />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('renders a custom title', () => {
+    render(<ErrorState title="Custom title" error="boom" />);
+    expect(screen.getByText('Custom title')).toBeInTheDocument();
+  });
+
+  it('renders the string error', () => {
+    render(<ErrorState error="Network unreachable" />);
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+  });
+
+  it('renders the Error.message when given an Error', () => {
+    render(<ErrorState error={new Error('Service down')} />);
+    expect(screen.getByText('Service down')).toBeInTheDocument();
+  });
+
+  it('falls back to Error.name when message is empty', () => {
+    const e = new Error();
+    e.name = 'FatalError';
+    render(<ErrorState error={e} />);
+    expect(screen.getByText('FatalError')).toBeInTheDocument();
+  });
+
+  it('fires onRetry when the retry button is clicked', async () => {
+    const onRetry = vi.fn();
+    render(<ErrorState error="boom" onRetry={onRetry} />);
+    await userEvent.click(screen.getByText('Try again'));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it('has role=alert', () => {
+    render(<ErrorState error="boom" />);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/data/KeyValueList.test.tsx

@@ -0,0 +1,59 @@
+// tests/ui/data/KeyValueList.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { KeyValueList } from '../../../src/web/ui/data/KeyValueList';
+
+describe('KeyValueList', () => {
+  const items = [
+    { key: 'name', label: 'Name', value: 'Bizar' },
+    { key: 'ver', label: 'Version', value: '6.3.0', mono: true, copyable: true },
+    { key: 'mode', label: 'Mode', value: 'dev' },
+  ];
+
+  it('renders all labels and values', () => {
+    render(<KeyValueList items={items} />);
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Bizar')).toBeInTheDocument();
+    expect(screen.getByText('Version')).toBeInTheDocument();
+    expect(screen.getByText('6.3.0')).toBeInTheDocument();
+  });
+
+  it('uses horizontal layout by default', () => {
+    const { container } = render(<KeyValueList items={items} />);
+    expect(container.querySelector('.bd-kv-list--horizontal')).toBeInTheDocument();
+    expect(container.querySelector('.bd-kv-list--vertical')).toBeNull();
+  });
+
+  it('switches to vertical layout when specified', () => {
+    const { container } = render(
+      <KeyValueList items={items} orientation="vertical" />,
+    );
+    expect(container.querySelector('.bd-kv-list--vertical')).toBeInTheDocument();
+    expect(container.querySelector('.bd-kv-list--horizontal')).toBeNull();
+  });
+
+  it('applies mono class to values when mono is true', () => {
+    const { container } = render(<KeyValueList items={items} />);
+    const values = container.querySelectorAll('.bd-kv-list__value');
+    // First value is non-mono, second is mono.
+    expect(values[0].classList.contains('bd-kv-list__value--mono')).toBe(false);
+    expect(values[1].classList.contains('bd-kv-list__value--mono')).toBe(true);
+  });
+
+  it('renders a copy button when copyable is true', () => {
+    render(<KeyValueList items={items} />);
+    expect(screen.getByLabelText('Copy to clipboard')).toBeInTheDocument();
+  });
+
+  it('writes to clipboard on copy and shows the success state', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: { writeText },
+    });
+    render(<KeyValueList items={items} />);
+    await userEvent.click(screen.getByLabelText('Copy to clipboard'));
+    expect(writeText).toHaveBeenCalledWith('6.3.0');
+  });
+});

package/bizar-dash/tests/ui/data/LoadingState.test.tsx

@@ -0,0 +1,37 @@
+// tests/ui/data/LoadingState.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { LoadingState } from '../../../src/web/ui/data/LoadingState';
+
+describe('LoadingState', () => {
+  it('renders the configured number of skeleton rows', () => {
+    const { container } = render(<LoadingState rows={5} />);
+    const bars = container.querySelectorAll('.bd-skeleton-row__bar');
+    expect(bars.length).toBe(5);
+  });
+
+  it('defaults to 3 skeleton rows when rows is omitted', () => {
+    const { container } = render(<LoadingState />);
+    expect(container.querySelectorAll('.bd-skeleton-row__bar').length).toBe(3);
+  });
+
+  it('renders a spinner + label when rows is set to 0', () => {
+    const { container } = render(<LoadingState rows={0} label="Loading…" />);
+    expect(container.querySelector('.bd-spinner')).toBeInTheDocument();
+    expect(screen.getByText('Loading…')).toBeInTheDocument();
+  });
+
+  it('renders both label and skeleton rows when rows is positive', () => {
+    render(<LoadingState rows={2} label="Loading…" />);
+    expect(screen.getByText('Loading…')).toBeInTheDocument();
+    const bars = document.querySelectorAll('.bd-skeleton-row__bar');
+    expect(bars.length).toBe(2);
+  });
+
+  it('exposes role=status with aria-label', () => {
+    render(<LoadingState rows={0} label="Fetching…" />);
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('aria-label', 'Fetching…');
+  });
+});