feat(web): add shared primitive components — TEC-3063

Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/density-toggle.test.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable import-x/order */
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+// ─── Mock preferences-store before module load ───────────────────────────────
+const toggleDensityMock = vi.fn();
+const setDensityMock = vi.fn();
+let mockDensity: 'compact' | 'regular' = 'regular';
+
+vi.mock('@/lib/preferences-store', () => ({
+  usePreferencesStore: () => ({
+    density: mockDensity,
+    toggleDensity: toggleDensityMock,
+    setDensity: setDensityMock,
+  }),
+}));
+
+import { DensityToggle } from '../density-toggle';
+
+describe('DensityToggle', () => {
+  beforeEach(() => {
+    mockDensity = 'regular';
+    toggleDensityMock.mockReset();
+    toggleDensityMock.mockImplementation(() => {
+      mockDensity = mockDensity === 'compact' ? 'regular' : 'compact';
+    });
+  });
+
+  it('renders a button with role switch', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('aria-checked=false when density is regular', () => {
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('aria-checked=true when density is compact', () => {
+    mockDensity = 'compact';
+    render(<DensityToggle />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('calls toggleDensity on click', () => {
+    render(<DensityToggle />);
+    fireEvent.click(screen.getByRole('switch'));
+    expect(toggleDensityMock).toHaveBeenCalledOnce();
+  });
+
+  it('shows custom aria-label when provided', () => {
+    render(<DensityToggle label="Custom label" />);
+    expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
+  });
+});