@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/builders/LogViewer/fixtures.ts

@@ -0,0 +1,49 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface LogLine {
+  id: string;
+  /** Display timestamp, e.g. "12:04:31.118". */
+  timestamp: string;
+  level: LogLevel;
+  message: string;
+  /** Emitting component, e.g. "worker-2". */
+  source?: string;
+}
+
+const MESSAGES: Array<[LogLevel, string, string]> = [
+  ['info', 'api', 'GET /v1/projects 200 in 42ms'],
+  ['debug', 'worker-1', 'job 8f2c picked from queue "default"'],
+  ['info', 'worker-1', 'job 8f2c completed in 1.2s'],
+  ['warn', 'api', 'slow query on deployments (812ms)'],
+  ['info', 'scheduler', 'next run of nightly-export at 02:00 UTC'],
+  ['error', 'worker-2', 'job 91ab failed: connection reset by peer'],
+  ['info', 'api', 'POST /v1/deployments 201 in 118ms'],
+  ['debug', 'cache', 'evicted 128 entries (lru)'],
+  ['warn', 'worker-2', 'retrying job 91ab (attempt 2 of 3)'],
+  ['info', 'worker-2', 'job 91ab completed in 3.4s'],
+];
+
+function pad(n: number, width = 2) {
+  return String(n).padStart(width, '0');
+}
+
+/** Deterministic sample stream of `count` lines (neutral service logs). */
+export function makeLogLines(count = 480, startSecond = 12 * 3600): LogLine[] {
+  return Array.from({ length: count }, (_, i) => {
+    const entry = MESSAGES[i % MESSAGES.length] ?? MESSAGES[0]!;
+    const t = startSecond + i * 0.37;
+    const h = Math.floor(t / 3600);
+    const m = Math.floor((t % 3600) / 60);
+    const s = Math.floor(t % 60);
+    const ms = Math.floor((t % 1) * 1000);
+    return {
+      id: `log-${i}`,
+      timestamp: `${pad(h)}:${pad(m)}:${pad(s)}.${pad(ms, 3)}`,
+      level: entry[0],
+      source: entry[1],
+      message: entry[2],
+    };
+  });
+}
+
+export const logLines: LogLine[] = makeLogLines();

package/src/builders/index.ts

@@ -0,0 +1,15 @@
+export * from './FlowBuilder/FlowBuilder';
+export {
+  NodeInspector,
+  NodePalette,
+  RunConsole,
+  type NodeInspectorProps,
+  type NodePaletteProps,
+  type PanelHeading,
+  type RunConsoleProps,
+} from './FlowBuilder/parts';
+export { meta as flowBuilderMeta } from './FlowBuilder/block.meta';
+export * from './CodePanel/CodePanel';
+export { meta as codePanelMeta } from './CodePanel/block.meta';
+export * from './LogViewer/LogViewer';
+export { meta as logViewerMeta } from './LogViewer/block.meta';

package/src/data-display/ActivityFeed/ActivityFeed.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ActivityFeed, groupActivityByDay, type ActivityItem } from './ActivityFeed';
+
+// The default feed's fixtures are relative to Date.now() at load time and the newest item is
+// 12 minutes old, so for 12 minutes after midnight there is no Today group. Pin the clock
+// (Date only; timers stay real) before the fixtures load.
+vi.hoisted(() => {
+  vi.useFakeTimers({ now: new Date(2026, 9, 3, 15, 0), toFake: ['Date'] });
+});
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+const now = new Date(2026, 9, 3, 15, 0);
+const items: ActivityItem[] = [
+  { id: '1', actor: { name: 'Ana Lopez' }, action: 'deployed', target: 'orders-api', at: new Date(2026, 9, 3, 14, 0) },
+  {
+    id: '2',
+    actor: { name: 'Sam Carter' },
+    action: 'invited',
+    target: 'lee@example.com',
+    at: new Date(2026, 9, 3, 9, 0),
+  },
+  { id: '3', actor: { name: 'Lee Wong' }, action: 'paused', target: 'nightly-export', at: new Date(2026, 9, 2, 18, 0) },
+  {
+    id: '4',
+    actor: { name: 'Priya Nair' },
+    action: 'created the project',
+    target: 'Checkout',
+    at: new Date(2026, 8, 28, 10, 0),
+  },
+];
+
+describe('ActivityFeed', () => {
+  it('renders the default feed', async () => {
+    const { container } = render(<ActivityFeed />);
+    expect(screen.getByRole('region', { name: 'Recent activity' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Today' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('groups items by day', () => {
+    const groups = groupActivityByDay(items, now, 'en-US');
+    expect(groups.map((g) => [g.label, g.items.length])).toEqual([
+      ['Today', 2],
+      ['Yesterday', 1],
+      ['Monday, Sep 28', 1],
+    ]);
+    render(<ActivityFeed items={items} now={now} locale="en-US" />);
+    expect(screen.getByRole('list', { name: 'Today' }).children).toHaveLength(2);
+    expect(screen.getByRole('list', { name: 'Yesterday' }).children).toHaveLength(1);
+  });
+
+  it('loads more on demand', async () => {
+    const onLoadMore = vi.fn();
+    render(<ActivityFeed items={items} now={now} onLoadMore={onLoadMore} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Load more' }));
+    expect(onLoadMore).toHaveBeenCalled();
+  });
+});

package/src/data-display/ActivityFeed/ActivityFeed.tsx

@@ -0,0 +1,118 @@
+import { Avatar, Button, cn, Timestamp, toDate, type DateInput } from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import { PROJECT_ACTIVITY } from './fixtures';
+
+export interface ActivityItem {
+  id: string;
+  actor: { name: string; src?: string };
+  /** Verb phrase ("deployed", "invited"). */
+  action: string;
+  /** Object of the action, emphasised ("orders-api v2.14.0"). */
+  target?: string;
+  at: DateInput;
+}
+
+export interface ActivityFeedProps {
+  /** Items, newest first. */
+  items?: readonly ActivityItem[];
+  /** Accessible name of the feed. */
+  label?: string;
+  /** Reference "now" for the Today / Yesterday headings (defaults to the mount time). */
+  now?: DateInput;
+  locale?: string;
+  /** Shows a "Load more" button. */
+  onLoadMore?: () => void;
+  loadingMore?: boolean;
+  /** Heading level of the day-group titles, to fit the page outline (default h3). */
+  groupHeadingAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+interface DayGroup {
+  key: string;
+  label: string;
+  items: ActivityItem[];
+}
+
+const dayKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+
+/** Groups items by calendar day (local time), labelled Today, Yesterday or the date. */
+export function groupActivityByDay(items: readonly ActivityItem[], now: Date, locale?: string): DayGroup[] {
+  const today = dayKey(now);
+  const yesterday = dayKey(new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1));
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'short', day: 'numeric' });
+  const groups: DayGroup[] = [];
+  for (const item of items) {
+    const date = toDate(item.at);
+    if (!date) continue;
+    const key = dayKey(date);
+    let group = groups.find((g) => g.key === key);
+    if (!group) {
+      group = { key, label: key === today ? 'Today' : key === yesterday ? 'Yesterday' : fmt.format(date), items: [] };
+      groups.push(group);
+    }
+    group.items.push(item);
+  }
+  return groups;
+}
+
+/** Activity feed: actor avatar, action, target and Timestamp, grouped by day. */
+export function ActivityFeed({
+  items = PROJECT_ACTIVITY,
+  label = 'Recent activity',
+  now,
+  locale,
+  onLoadMore,
+  loadingMore,
+  groupHeadingAs: GroupTag = 'h3',
+  className,
+}: ActivityFeedProps) {
+  const [mountedAt] = useState(() => Date.now());
+  const reference = toDate(now ?? mountedAt) ?? new Date(mountedAt);
+  const groups = groupActivityByDay(items, reference, locale);
+  const id = useId();
+  return (
+    <section aria-label={label} className={cn('flex flex-col gap-6', className)}>
+      {groups.map((group) => {
+        const headingId = `${id}-${group.key}`;
+        return (
+          <div key={group.key}>
+            <GroupTag
+              id={headingId}
+              className="mb-3 font-mono text-[10.5px] font-medium tracking-[0.12em] text-muted-foreground uppercase"
+            >
+              {group.label}
+            </GroupTag>
+            <ul aria-labelledby={headingId} className="flex flex-col">
+              {group.items.map((item, i) => (
+                <li key={item.id} className="relative flex gap-3 pb-5 last:pb-0">
+                  {i < group.items.length - 1 && (
+                    <span aria-hidden className="absolute top-7 bottom-0.5 start-[11.5px] w-px bg-border" />
+                  )}
+                  <Avatar name={item.actor.name} src={item.actor.src} size="xs" className="mt-0.5" />
+                  <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
+                    <p className="min-w-0 text-[13px] text-muted-foreground">
+                      <span className="font-semibold text-foreground">{item.actor.name}</span> {item.action}
+                      {item.target && (
+                        <>
+                          {' '}
+                          <span className="font-medium text-foreground">{item.target}</span>
+                        </>
+                      )}
+                    </p>
+                    <Timestamp value={item.at} locale={locale} className="shrink-0 font-mono text-[11px]" />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+      {onLoadMore && (
+        <Button variant="secondary" size="sm" className="self-start" loading={loadingMore} onClick={onLoadMore}>
+          Load more
+        </Button>
+      )}
+    </section>
+  );
+}

package/src/data-display/ActivityFeed/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Activity feed',
+  family: 'data-display',
+  status: 'beta',
+  description:
+    'Who did what, when: actor avatar, action, target and Timestamp, grouped by day (Today, Yesterday, date), with optional Load more.',
+  uses: ['Avatar', 'Timestamp', 'Button'],
+};

package/src/data-display/ActivityFeed/fixtures.ts

@@ -0,0 +1,29 @@
+import type { ActivityItem } from './ActivityFeed';
+
+const MIN = 60_000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+/** Relative to load time so the docs always show Today / Yesterday groups. */
+const NOW = Date.now();
+
+/** Project activity, newest first. */
+export const PROJECT_ACTIVITY: ActivityItem[] = [
+  { id: 'a1', actor: { name: 'Ana Lopez' }, action: 'deployed', target: 'orders-api v2.14.0', at: NOW - 12 * MIN },
+  {
+    id: 'a2',
+    actor: { name: 'Sam Carter' },
+    action: 'approved the release of',
+    target: 'orders-api',
+    at: NOW - 40 * MIN,
+  },
+  { id: 'a3', actor: { name: 'Priya Nair' }, action: 'invited', target: 'jordan@example.com', at: NOW - 2 * HOUR },
+  {
+    id: 'a4',
+    actor: { name: 'Ana Lopez' },
+    action: 'rotated the API key',
+    target: 'billing-sync',
+    at: NOW - DAY - HOUR,
+  },
+  { id: 'a5', actor: { name: 'Lee Wong' }, action: 'paused', target: 'nightly-export', at: NOW - DAY - 5 * HOUR },
+  { id: 'a6', actor: { name: 'Priya Nair' }, action: 'created the project', target: 'Checkout', at: NOW - 3 * DAY },
+];

package/src/data-display/ChartCard/ChartCard.ranges.test.tsx

@@ -0,0 +1,282 @@
+import { act, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ChartCard } from './ChartCard';
+import CustomRangeChartCard from './examples/custom-ranges';
+import ToolbarOwnedRangeChartCard from './examples/toolbar-owned-range';
+
+const ranges = [
+  { value: '24h', label: '24h', summary: { value: '12 requests' } },
+  { value: '7d', label: '7d', summary: { value: '70 requests' } },
+  { value: '30d', label: '30d', summary: { value: '300 requests' } },
+];
+const dataByRange = {
+  '24h': [{ time: 'Today', Requests: 12 }],
+  '7d': [{ time: 'This week', Requests: 70 }],
+  '30d': [{ time: 'This month', Requests: 300 }],
+};
+const custom = {
+  title: 'Requests',
+  ranges,
+  dataByRange,
+  index: 'time' as const,
+  categories: ['Requests'] as const,
+  dataTable: true,
+  valueFormatter: (value: number) => String(value),
+};
+
+describe('ChartCard ranges', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.restoreAllMocks();
+  });
+
+  it('preserves the default options, initial selection and fixture data', () => {
+    render(<ChartCard dataTable />);
+    const buttons = within(screen.getByRole('group', { name: 'Infrastructure cost range' })).getAllByRole('button');
+    expect(buttons.map((button) => button.textContent)).toEqual(['7d', '30d', '90d']);
+    expect(buttons[0]).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByText('$2,412')).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Infrastructure cost, 7d' })).toHaveTextContent('Mon$180$42$120');
+  });
+
+  it('renders the custom range example with the supplied windows', () => {
+    render(<CustomRangeChartCard />);
+    expect(
+      within(screen.getByRole('group', { name: 'Requests range' }))
+        .getAllByRole('button')
+        .map((b) => b.textContent),
+    ).toEqual(['24h', '7d', '30d']);
+    expect(screen.getByRole('figure', { name: 'Requests, 24h' })).toBeInTheDocument();
+  });
+
+  it('lets the toolbar example own the only range control', async () => {
+    const user = userEvent.setup();
+    render(<ToolbarOwnedRangeChartCard />);
+    expect(screen.queryByRole('group', { name: 'Requests range', hidden: true })).toBeNull();
+    expect(screen.queryByRole('button', { name: '90d' })).toBeNull();
+    expect(screen.getByRole('figure', { name: 'Requests, 24h' })).toBeInTheDocument();
+    await user.click(screen.getByRole('combobox', { name: 'Page window' }));
+    expect((await screen.findAllByRole('option')).map((option) => option.textContent)).toEqual(['24h', '7d', '30d']);
+    await user.click(await screen.findByRole('option', { name: '7d' }));
+    expect(screen.getByRole('figure', { name: 'Requests, 7d' })).toBeInTheDocument();
+    expect(screen.getByText('8,680 requests')).toBeInTheDocument();
+  });
+
+  it('renders exactly the supplied range options in order', () => {
+    render(<ChartCard {...custom} />);
+    const buttons = within(screen.getByRole('group', { name: 'Requests range' })).getAllByRole('button');
+    expect(buttons.map((button) => button.textContent)).toEqual(['24h', '7d', '30d']);
+    expect(screen.queryByRole('button', { name: '90d' })).toBeNull();
+    expect(buttons[0]).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('holds controlled selection and data until the parent changes the range', async () => {
+    const onRangeChange = vi.fn();
+    const { rerender } = render(<ChartCard {...custom} range="7d" onRangeChange={onRangeChange} />);
+    await userEvent.click(screen.getByRole('button', { name: '30d' }));
+    expect(onRangeChange).toHaveBeenCalledExactlyOnceWith('30d');
+    expect(screen.getByRole('button', { name: '7d' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: '30d' })).toHaveAttribute('aria-pressed', 'false');
+    expect(screen.getByRole('figure', { name: 'Requests, 7d' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Requests, 7d' })).toHaveTextContent('This week70');
+    expect(screen.queryByText('300 requests')).toBeNull();
+    rerender(<ChartCard {...custom} range="30d" onRangeChange={onRangeChange} />);
+    expect(screen.getByRole('button', { name: '30d' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('figure', { name: 'Requests, 30d' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Requests, 30d' })).toHaveTextContent('This month300');
+    expect(screen.getByText('300 requests')).toBeInTheDocument();
+  });
+
+  it('updates uncontrolled selection and calls the consumer when clicked', async () => {
+    const onRangeChange = vi.fn();
+    render(<ChartCard {...custom} defaultRange="7d" onRangeChange={onRangeChange} />);
+    await userEvent.click(screen.getByRole('button', { name: '30d' }));
+    expect(onRangeChange).toHaveBeenCalledExactlyOnceWith('30d');
+    expect(screen.getByRole('button', { name: '30d' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('table', { name: 'Requests, 30d' })).toHaveTextContent('This month300');
+  });
+
+  it('shows the controlled 24h data and label with the toggle hidden', () => {
+    render(<ChartCard {...custom} range="24h" showRangeToggle={false} />);
+    expect(screen.queryByRole('group', { name: 'Requests range', hidden: true })).toBeNull();
+    expect(screen.getByRole('figure', { name: 'Requests, 24h' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Requests, 24h' })).toHaveTextContent('Today12');
+    expect(screen.getByText('12 requests')).toBeInTheDocument();
+  });
+
+  it('uses one tab stop, arrow and boundary focus keys, and Space/Enter selection', async () => {
+    const user = userEvent.setup();
+    render(<ChartCard {...custom} defaultRange="7d" />);
+    const group = screen.getByRole('group', { name: 'Requests range' });
+    const [first, middle, last] = within(group).getAllByRole('button');
+    const expectOneTabStop = () =>
+      expect(
+        within(group)
+          .getAllByRole('button')
+          .filter((b) => b.tabIndex === 0),
+      ).toHaveLength(1);
+    await user.tab();
+    expect(middle).toHaveFocus();
+    expectOneTabStop();
+    await user.keyboard('{ArrowRight}');
+    expect(last).toHaveFocus();
+    expect(middle).toHaveAttribute('aria-pressed', 'true');
+    await user.keyboard('{ArrowLeft}');
+    expect(middle).toHaveFocus();
+    await user.keyboard('{Home}');
+    expect(first).toHaveFocus();
+    await user.keyboard(' ');
+    expect(first).toHaveAttribute('aria-pressed', 'true');
+    expect(middle).toHaveAttribute('aria-pressed', 'false');
+    await user.keyboard('{End}');
+    expect(last).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(last).toHaveAttribute('aria-pressed', 'true');
+    expect(first).toHaveAttribute('aria-pressed', 'false');
+    expectOneTabStop();
+    await user.tab();
+    expect(group).not.toContainElement(document.activeElement as HTMLElement);
+  });
+
+  it('keeps pointer focus on the clicked range for subsequent keyboard selection', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <button type="button">Outside</button>
+        <ChartCard />
+      </>,
+    );
+    const outside = screen.getByRole('button', { name: 'Outside' });
+    const selected = screen.getByRole('button', { name: '90d' });
+    await user.click(outside);
+    await user.click(selected);
+    expect(selected).toHaveFocus();
+    expect(selected).toHaveAttribute('aria-pressed', 'true');
+    await user.keyboard(' ');
+    expect(selected).toHaveFocus();
+    expect(selected).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: '7d' })).toHaveAttribute('aria-pressed', 'false');
+    await user.click(outside);
+    await user.tab();
+    expect(selected).toHaveFocus();
+  });
+
+  it('preserves an arrow-focused option when focus returns without Tab', async () => {
+    const user = userEvent.setup();
+    render(<ChartCard {...custom} defaultRange="7d" />);
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+    const focused = screen.getByRole('button', { name: '30d' });
+    expect(focused).toHaveFocus();
+    act(() => {
+      focused.blur();
+      focused.focus();
+    });
+    expect(focused).toHaveFocus();
+    expect(screen.getByRole('button', { name: '7d' })).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('returns keyboard focus to the selected range after a pointer release outside the group', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <ChartCard showLegend={false} />
+        <button type="button">Outside</button>
+      </>,
+    );
+    const outside = screen.getByRole('button', { name: 'Outside' });
+    const selected = screen.getByRole('button', { name: '7d' });
+    const other = screen.getByRole('button', { name: '90d' });
+    await user.pointer({ keys: '[MouseLeft>]', target: other });
+    expect(other).toHaveFocus();
+    await user.pointer({ keys: '[/MouseLeft]', target: outside });
+    expect(selected).toHaveAttribute('aria-pressed', 'true');
+    await user.tab();
+    expect(outside).toHaveFocus();
+    await user.tab({ shift: true });
+    expect(selected).toHaveFocus();
+    await user.keyboard(' ');
+    expect(selected).toHaveAttribute('aria-pressed', 'true');
+    expect(other).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it.each(['dark', 'light', 'high_contrast'])(
+    'has no axe violations for default, custom and hidden ranges in %s',
+    async (theme) => {
+      const previousTheme = document.documentElement.className;
+      document.documentElement.className = theme;
+      try {
+        for (const variant of [
+          <ChartCard />,
+          <ChartCard {...custom} />,
+          <ChartCard {...custom} range="24h" showRangeToggle={false} />,
+        ]) {
+          const { container, unmount } = render(variant);
+          await expectNoAxeViolations(container);
+          unmount();
+        }
+      } finally {
+        document.documentElement.className = previousTheme;
+      }
+    },
+  );
+
+  it.each(['range', 'defaultRange'] as const)(
+    'falls back consistently for an unknown %s, warning only in development',
+    (prop) => {
+      const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vi.stubEnv('NODE_ENV', 'development');
+      const { unmount } = render(<ChartCard {...{ [prop]: 'unknown' }} />);
+      expect(screen.getByRole('figure', { name: 'Infrastructure cost, 7d' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '7d' })).toHaveAttribute('aria-pressed', 'true');
+      expect(screen.getByText('$2,412')).toBeInTheDocument();
+      expect(warning).toHaveBeenCalledWith(
+        'ChartCard: range/defaultRange is not in ranges; falling back to the first option.',
+      );
+      unmount();
+      warning.mockClear();
+      vi.stubEnv('NODE_ENV', 'production');
+      render(<ChartCard {...{ [prop]: 'unknown' }} />);
+      expect(screen.getByRole('button', { name: '7d' })).toHaveAttribute('aria-pressed', 'true');
+      expect(warning).not.toHaveBeenCalledWith(
+        'ChartCard: range/defaultRange is not in ranges; falling back to the first option.',
+      );
+    },
+  );
+
+  it('omits the range control while preserving content and chart states', async () => {
+    const onRetry = vi.fn();
+    const props = {
+      showRangeToggle: false,
+      action: <button type="button">Details</button>,
+      footer: 'Updated just now',
+      onRetry,
+    };
+    const { rerender } = render(<ChartCard {...props} />);
+    const expectNoRangeControl = () => {
+      expect(screen.queryByRole('group', { name: 'Infrastructure cost range', hidden: true })).toBeNull();
+      for (const name of ['7d', '30d', '90d']) {
+        expect(screen.queryByRole('button', { name, hidden: true })).toBeNull();
+      }
+    };
+    expectNoRangeControl();
+    expect(screen.getByRole('heading', { name: 'Infrastructure cost' })).toBeInTheDocument();
+    expect(screen.getByText('$2,412')).toBeInTheDocument();
+    const figure = screen.getByRole('figure', { name: 'Infrastructure cost, 7d' });
+    expect(within(figure).getByRole('button', { name: 'Compute' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Details' })).toBeInTheDocument();
+    expect(screen.getByText('Updated just now')).toBeInTheDocument();
+    rerender(<ChartCard {...props} state="loading" />);
+    expectNoRangeControl();
+    expect(screen.getByRole('status', { name: 'Loading chart' })).toBeInTheDocument();
+    rerender(<ChartCard {...props} state="empty" emptyMessage="No samples yet" />);
+    expectNoRangeControl();
+    expect(screen.getByText('No samples yet')).toBeInTheDocument();
+    rerender(<ChartCard {...props} state="error" errorMessage="Samples unavailable" />);
+    expectNoRangeControl();
+    expect(screen.getByRole('alert')).toHaveTextContent('Samples unavailable');
+    await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+});

package/src/data-display/ChartCard/ChartCard.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ChartCard } from './ChartCard';
+import HeatmapChartCard from './examples/heatmap';
+import { TRAFFIC_BY_RANGE } from './fixtures';
+
+describe('ChartCard', () => {
+  it('renders title, legend and chart for the first range', async () => {
+    const { container } = render(<ChartCard />);
+    expect(screen.getByRole('heading', { name: 'Infrastructure cost' })).toBeInTheDocument();
+    expect(screen.getByRole('figure', { name: 'Infrastructure cost, 7d' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Compute' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByText('$2,412')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('changes range from the toggle group', async () => {
+    const onRangeChange = vi.fn();
+    render(<ChartCard onRangeChange={onRangeChange} kind="bar" />);
+    await userEvent.click(screen.getByRole('button', { name: '30d' }));
+    expect(onRangeChange).toHaveBeenCalledWith('30d');
+    expect(screen.getByRole('figure', { name: 'Infrastructure cost, 30d' })).toBeInTheDocument();
+    expect(screen.getByText('$9,880')).toBeInTheDocument();
+  });
+
+  it('renders a heatmap with its colour scale, keyboard grid and data table', async () => {
+    const { container } = render(<HeatmapChartCard />);
+    expect(screen.getByRole('heading', { name: 'Traffic by hour' })).toBeInTheDocument();
+    // A single range hides the range toggle.
+    expect(screen.queryByRole('group', { name: 'Traffic by hour range' })).toBeNull();
+    expect(screen.getByRole('figure', { name: 'Traffic by hour, Last 7 days' })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: /colour grid/ })).toHaveAttribute('tabindex', '0');
+    const rows = TRAFFIC_BY_RANGE['7d']!;
+    expect(container.querySelectorAll('[data-cell]')).toHaveLength(rows.length * 8);
+    // Cells fill the card's plot height.
+    const cell = container.querySelector('[data-cell="0-0"]') as HTMLElement;
+    expect(cell.style.height).toBe(`${Math.floor((240 - 20 - 3 * rows.length) / rows.length)}px`);
+    expect(screen.getByRole('table', { name: 'Traffic by hour, Last 7 days' })).toHaveTextContent('Day');
+    await expectNoAxeViolations(container);
+  });
+
+  it('hides the heatmap scale with showLegend={false} and passes chart states through', () => {
+    const { container, rerender } = render(<HeatmapChartCard />);
+    expect(container.querySelector('.h-2\\.5.w-4')).not.toBeNull();
+    rerender(<ChartCard kind="heatmap" state="error" errorMessage="Traffic is unavailable" onRetry={() => {}} />);
+    expect(screen.getByRole('alert')).toHaveTextContent('Traffic is unavailable');
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+    rerender(<ChartCard state="loading" />);
+    expect(screen.getByRole('status', { name: 'Loading chart' })).toBeInTheDocument();
+    rerender(<ChartCard kind="heatmap" showLegend={false} />);
+    expect(container.querySelector('.h-2\\.5.w-4')).toBeNull();
+  });
+});