@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/meta.ts

@@ -0,0 +1,23 @@
+/** Metadata contract for a block: packages/blocks/src/<family>/<Name>/block.meta.ts. */
+export interface BlockMeta {
+  /** Display name, e.g. "KPI row". */
+  name: string;
+  family:
+    | 'page-chrome'
+    | 'shell'
+    | 'data-display'
+    | 'tables'
+    | 'forms'
+    | 'feedback'
+    | 'billing'
+    | 'team'
+    | 'scheduling'
+    | 'builders'
+    | 'ai'
+    | 'auth'
+    | 'marketing';
+  status: 'stable' | 'beta' | 'experimental';
+  description: string;
+  /** @gntik-ai/ui (and other kit) components it composes, for docs and agents. */
+  uses: string[];
+}

package/src/page-chrome/BulkActionBar/BulkActionBar.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { BulkActionBar } from './BulkActionBar';
+
+describe('BulkActionBar', () => {
+  it('renders the default selection', async () => {
+    const { container } = render(<BulkActionBar totalCount={24} />);
+    expect(screen.getByRole('toolbar', { name: 'Bulk actions' })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('3 of 24 items selected');
+    await expectNoAxeViolations(container);
+  });
+
+  it('runs actions, clears and hides at zero', async () => {
+    const user = userEvent.setup();
+    const onClear = vi.fn();
+    const onArchive = vi.fn();
+    const { rerender } = render(
+      <BulkActionBar
+        selectedCount={1}
+        noun={['member', 'members']}
+        onClear={onClear}
+        actions={[{ label: 'Archive', onClick: onArchive }]}
+      />,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('1 member selected');
+    await user.click(screen.getByRole('button', { name: 'Archive' }));
+    await user.click(screen.getByRole('button', { name: 'Clear selection' }));
+    expect(onArchive).toHaveBeenCalledTimes(1);
+    expect(onClear).toHaveBeenCalledTimes(1);
+    rerender(<BulkActionBar selectedCount={0} />);
+    expect(screen.queryByRole('toolbar')).not.toBeInTheDocument();
+  });
+});

package/src/page-chrome/BulkActionBar/BulkActionBar.tsx

@@ -0,0 +1,76 @@
+import { Archive, Download, Trash2, X } from '@gntik-ai/icons';
+import { Toolbar, ToolbarButton, ToolbarEnd, ToolbarSeparator, ToolbarStart, cn, useI18n } from '@gntik-ai/ui';
+import type { PageChromeAction } from '../types';
+
+export interface BulkActionBarProps {
+  /** Number of selected rows; the bar renders nothing at 0. */
+  selectedCount?: number;
+  /** Total rows, shown as "3 of 24 selected". */
+  totalCount?: number;
+  /** Noun for the count, singular and plural. */
+  noun?: [singular: string, plural: string];
+  actions?: PageChromeAction[];
+  onClear?: () => void;
+  clearLabel?: string;
+  className?: string;
+}
+
+const bulkActionBarDefaultActions: PageChromeAction[] = [
+  { label: 'Export', icon: Download },
+  { label: 'Archive', icon: Archive },
+  { label: 'Delete', icon: Trash2, variant: 'destructive' },
+];
+
+/** Contextual toolbar shown while rows are selected: count, bulk actions and clear selection. */
+export function BulkActionBar({
+  selectedCount = 3,
+  totalCount,
+  noun: nounProp,
+  actions = bulkActionBarDefaultActions,
+  onClear,
+  clearLabel: clearLabelProp,
+  className,
+}: BulkActionBarProps) {
+  const { t, locale } = useI18n();
+  const noun = nounProp ?? ([t('bulk.item'), t('bulk.items')] as const);
+  const clearLabel = clearLabelProp ?? t('common.clearSelection');
+  if (selectedCount <= 0) return null;
+  const word = selectedCount === 1 ? noun[0] : noun[1];
+  return (
+    <Toolbar
+      variant="plain"
+      aria-label={t('bulk.label')}
+      className={cn(
+        'flex-wrap gap-y-2 rounded-lg border border-primary/30 bg-primary/8 px-3 py-2 shadow-sm',
+        className,
+      )}
+    >
+      <ToolbarStart>
+        <p role="status" className="text-[13px] font-medium text-foreground">
+          <span className="font-mono tabular-nums">{selectedCount.toLocaleString(locale)}</span>
+          {totalCount != null && (
+            <span className="text-muted-foreground"> {t('bulk.of', { total: totalCount.toLocaleString(locale) })}</span>
+          )}{' '}
+          {word} {t('bulk.selected', { count: selectedCount })}
+        </p>
+        <ToolbarSeparator />
+        <ToolbarButton icon={X} onClick={onClear}>
+          {clearLabel}
+        </ToolbarButton>
+      </ToolbarStart>
+      <ToolbarEnd className="flex-wrap">
+        {actions.map((a) => (
+          <ToolbarButton
+            key={a.id ?? a.label}
+            variant={a.variant ?? 'secondary'}
+            icon={a.icon}
+            disabled={a.disabled}
+            onClick={a.onClick}
+          >
+            {a.label}
+          </ToolbarButton>
+        ))}
+      </ToolbarEnd>
+    </Toolbar>
+  );
+}

package/src/page-chrome/BulkActionBar/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Bulk action bar',
+  family: 'page-chrome',
+  status: 'beta',
+  description: 'Toolbar that appears while table rows are selected: selection count, bulk actions and clear selection.',
+  uses: ['Toolbar', 'ToolbarButton'],
+};

package/src/page-chrome/PageHeader/PageHeader.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PageHeader } from './PageHeader';
+
+describe('PageHeader', () => {
+  it('focuses its title through titleRef without adding a Tab stop', async () => {
+    const user = userEvent.setup();
+    const titleRef = createRef<HTMLHeadingElement>();
+    const { rerender } = render(
+      <>
+        <PageHeader
+          title="Not found"
+          titleRef={titleRef}
+          as="div"
+          breadcrumbs={null}
+          description={null}
+          status=""
+          meta={[]}
+          actions={[]}
+          tabs={null}
+        />
+        <button>Go home</button>
+      </>,
+    );
+    const title = screen.getByRole('heading', { level: 1, name: 'Not found' });
+    expect(title).toHaveAttribute('tabindex', '-1');
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Go home' })).toHaveFocus();
+    titleRef.current?.focus();
+    expect(title).toHaveFocus();
+    rerender(<PageHeader />);
+    expect(screen.getByRole('heading', { level: 1 })).not.toHaveAttribute('tabindex');
+  });
+
+  it('renders the default header', async () => {
+    const { container } = render(<PageHeader />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Deployments' })).toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
+    expect(screen.getByRole('tablist', { name: 'Page sections' })).toBeInTheDocument();
+    expect(screen.getByText('eu-west-1')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('runs actions and reports tab changes', async () => {
+    const user = userEvent.setup();
+    const onCreate = vi.fn();
+    const onTabChange = vi.fn();
+    render(
+      <PageHeader
+        breadcrumbs={null}
+        actions={[
+          { label: 'Export', variant: 'secondary' },
+          { label: 'Create', onClick: onCreate },
+        ]}
+        onTabChange={onTabChange}
+      />,
+    );
+    // Desktop row + compact row both carry the primary action (CSS picks one).
+    const [create] = screen.getAllByRole('button', { name: 'Create' });
+    await user.click(create!);
+    expect(onCreate).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole('button', { name: 'More actions' })).toBeInTheDocument();
+    await user.click(screen.getByRole('tab', { name: /Domains/ }));
+    expect(onTabChange).toHaveBeenCalledWith('domains');
+  });
+});

package/src/page-chrome/PageHeader/PageHeader.tsx

@@ -0,0 +1,152 @@
+import {
+  Breadcrumbs,
+  Button,
+  MoreMenu,
+  StatusTag,
+  Tabs,
+  TabsList,
+  TabsTab,
+  cn,
+  type BreadcrumbItem,
+  type StatusDefinition,
+} from '@gntik-ai/ui';
+import type { LucideIcon } from '@gntik-ai/icons';
+import type { ReactNode, Ref } from 'react';
+import { toMenuAction, type PageChromeAction } from '../types';
+import { pageHeaderActions, pageHeaderBreadcrumbs, pageHeaderMeta, pageHeaderTabs } from './fixtures';
+
+export interface PageHeaderMetaItem {
+  /** Term (screen-reader only when an icon is shown). */
+  label: string;
+  value: ReactNode;
+  icon?: LucideIcon;
+  /** Render the value in Geist Mono (ids, regions, versions). */
+  mono?: boolean;
+}
+
+export interface PageHeaderTab {
+  value: string;
+  label: string;
+  count?: number;
+}
+
+export interface PageHeaderProps {
+  /** Root element. Use 'div' where the layout already has a banner (e.g. StackedLayout's pageHeader slot). */
+  as?: 'header' | 'div';
+  /** Location trail above the title; `null` hides it. */
+  breadcrumbs?: BreadcrumbItem[] | null;
+  title?: ReactNode;
+  /** h1 focus target: adds tabIndex=-1 for titleRef.current.focus(), outside the Tab order. */
+  titleRef?: Ref<HTMLHeadingElement>;
+  description?: ReactNode;
+  /** StatusTag key next to the title (e.g. `active`, `paused`, `failed`). */
+  status?: string;
+  statuses?: Record<string, StatusDefinition>;
+  /** Meta row under the description. */
+  meta?: PageHeaderMetaItem[];
+  /**
+   * Header actions in visual order. The primary one (first with `variant: 'primary'`, else the
+   * last) stays visible on small screens; the rest fold into a MoreMenu.
+   */
+  actions?: PageChromeAction[];
+  /** Resource-level navigation tabs under the header; `null` hides them. */
+  tabs?: PageHeaderTab[] | null;
+  tab?: string;
+  defaultTab?: string;
+  onTabChange?: (value: string) => void;
+  className?: string;
+}
+
+/** Screen header: breadcrumb, title + status, description, meta row, actions and optional tabs. */
+export function PageHeader({
+  as: Root = 'header',
+  breadcrumbs = pageHeaderBreadcrumbs,
+  title = 'Deployments',
+  titleRef,
+  description = 'Every build and release of this project across its environments.',
+  status = 'active',
+  statuses,
+  meta = pageHeaderMeta,
+  actions = pageHeaderActions,
+  tabs = pageHeaderTabs,
+  tab,
+  defaultTab,
+  onTabChange,
+  className,
+}: PageHeaderProps) {
+  const explicitPrimary = actions.findIndex((a) => a.variant === 'primary');
+  const primaryIndex = explicitPrimary >= 0 ? explicitPrimary : actions.length - 1;
+  const primary = actions[primaryIndex];
+  const folded = actions.filter((_, i) => i !== primaryIndex);
+
+  const renderAction = (action: PageChromeAction, index: number) => (
+    <Button
+      key={action.id ?? action.label}
+      variant={action.variant ?? (index === primaryIndex ? 'primary' : 'secondary')}
+      icon={action.icon}
+      disabled={action.disabled}
+      onClick={action.onClick}
+    >
+      {action.label}
+    </Button>
+  );
+
+  return (
+    <Root className={cn('min-w-0', className)}>
+      {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} maxItems={4} className="mb-2.5" />}
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+            <h1
+              ref={titleRef}
+              tabIndex={titleRef != null ? -1 : undefined}
+              className="min-w-0 truncate text-2xl font-bold tracking-tight text-foreground"
+            >
+              {title}
+            </h1>
+            {status && <StatusTag status={status} statuses={statuses} />}
+          </div>
+          {description != null && (
+            <p className="mt-1.5 max-w-2xl text-[13px] leading-6 text-muted-foreground">{description}</p>
+          )}
+          {meta.length > 0 && (
+            <dl className="mt-2.5 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12.5px] text-muted-foreground">
+              {meta.map(({ label, value, icon: Icon, mono }) => (
+                <div key={label} className="inline-flex items-center gap-1.5">
+                  {Icon && <Icon size={14} aria-hidden />}
+                  <dt className={cn(Icon && 'sr-only')}>{label}</dt>
+                  <dd className={cn('text-foreground', mono && 'font-mono text-[12px]')}>{value}</dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+        {actions.length > 0 && (
+          <>
+            <div className="hidden shrink-0 items-center gap-2.5 sm:flex">{actions.map(renderAction)}</div>
+            <div className="flex shrink-0 items-center gap-2 sm:hidden">
+              {folded.length > 0 && <MoreMenu items={folded.map(toMenuAction)} label="More actions" />}
+              {primary && renderAction(primary, primaryIndex)}
+            </div>
+          </>
+        )}
+      </div>
+      {tabs && tabs.length > 0 && (
+        <Tabs
+          value={tab}
+          defaultValue={defaultTab ?? tabs[0]?.value}
+          onValueChange={(value) => onTabChange?.(String(value))}
+          className="mt-5"
+        >
+          <TabsList aria-label="Page sections" className="overflow-x-auto">
+            {tabs.map((t) => (
+              <TabsTab key={t.value} value={t.value} count={t.count}>
+                {t.label}
+              </TabsTab>
+            ))}
+          </TabsList>
+        </Tabs>
+      )}
+    </Root>
+  );
+}

package/src/page-chrome/PageHeader/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Page header',
+  family: 'page-chrome',
+  status: 'beta',
+  description:
+    'Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. titleRef targets the h1 for titleRef.current.focus(), adding tabIndex=-1 only when supplied so the title stays outside the Tab order. In a StatusLayout heading slot use as="div" and disable breadcrumb, meta, tabs, actions, status and description fixtures; the slot supplies the page’s only h1.',
+  uses: ['Breadcrumbs', 'Button', 'MoreMenu', 'StatusTag', 'Tabs'],
+};

package/src/page-chrome/PageHeader/fixtures.ts

@@ -0,0 +1,29 @@
+import { Globe, GitBranch, Clock } from '@gntik-ai/icons';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+import type { PageChromeAction } from '../types';
+import type { PageHeaderMetaItem, PageHeaderTab } from './PageHeader';
+
+export const pageHeaderBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Projects', href: '#projects' },
+  { label: 'acme-web', href: '#acme-web', mono: true },
+  { label: 'Deployments' },
+];
+
+export const pageHeaderMeta: PageHeaderMetaItem[] = [
+  { label: 'Region', value: 'eu-west-1', icon: Globe, mono: true },
+  { label: 'Branch', value: 'main', icon: GitBranch, mono: true },
+  { label: 'Last deploy', value: '12 min ago', icon: Clock },
+];
+
+export const pageHeaderActions: PageChromeAction[] = [
+  { label: 'View logs', variant: 'secondary' },
+  { label: 'Pause', variant: 'secondary' },
+  { label: 'New deployment', variant: 'primary' },
+];
+
+export const pageHeaderTabs: PageHeaderTab[] = [
+  { value: 'overview', label: 'Overview' },
+  { value: 'deployments', label: 'Deployments', count: 1284 },
+  { value: 'domains', label: 'Domains' },
+  { value: 'settings', label: 'Settings' },
+];

package/src/page-chrome/PageToolbar/PageToolbar.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PageToolbar } from './PageToolbar';
+
+describe('PageToolbar', () => {
+  it('renders the default toolbar', async () => {
+    const { container } = render(<PageToolbar />);
+    expect(screen.getByRole('toolbar', { name: 'Page toolbar' })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Table view' })).toHaveAttribute('aria-pressed', 'true');
+    await expectNoAxeViolations(container);
+  });
+
+  it('reports search, view and primary action', async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    const onViewChange = vi.fn();
+    const onCreate = vi.fn();
+    render(
+      <PageToolbar
+        onSearchChange={onSearchChange}
+        onViewChange={onViewChange}
+        primaryAction={{ label: 'Create', onClick: onCreate }}
+      />,
+    );
+    await user.type(screen.getByRole('searchbox'), 'api');
+    expect(onSearchChange).toHaveBeenLastCalledWith('api');
+    await user.click(screen.getByRole('button', { name: 'Grid view' }));
+    expect(onViewChange).toHaveBeenCalledWith('grid');
+    expect(screen.getByRole('button', { name: 'Grid view' })).toHaveAttribute('aria-pressed', 'true');
+    // Clicking the active view keeps it selected.
+    await user.click(screen.getByRole('button', { name: 'Grid view' }));
+    expect(screen.getByRole('button', { name: 'Grid view' })).toHaveAttribute('aria-pressed', 'true');
+    await user.click(screen.getByRole('button', { name: 'Create' }));
+    expect(onCreate).toHaveBeenCalledTimes(1);
+  });
+});

package/src/page-chrome/PageToolbar/PageToolbar.tsx

@@ -0,0 +1,138 @@
+import { Plus, Search, SlidersHorizontal } from '@gntik-ai/icons';
+import type { LucideIcon } from '@gntik-ai/icons';
+import {
+  Toggle,
+  ToggleGroup,
+  Toolbar,
+  ToolbarButton,
+  ToolbarEnd,
+  ToolbarInput,
+  ToolbarSeparator,
+  ToolbarStart,
+  cn,
+  useI18n,
+} from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import type { PageChromeAction } from '../types';
+import { pageToolbarViews } from './fixtures';
+
+export interface PageToolbarView {
+  value: string;
+  /** Accessible name of the icon toggle. */
+  label: string;
+  icon: LucideIcon;
+}
+
+export interface PageToolbarProps {
+  /** Controlled search text. */
+  search?: string;
+  defaultSearch?: string;
+  onSearchChange?: (value: string) => void;
+  searchLabel?: string;
+  searchPlaceholder?: string;
+  /**
+   * Filter controls. Use ToolbarButton (optionally with `render` for a Menu/Popover trigger) so they
+   * join the toolbar's arrow-key navigation. Omitted: a single "Filters" button; `null` hides it.
+   */
+  filters?: ReactNode;
+  /** View modes for the segmented toggle; `null` or an empty list hides it. */
+  views?: PageToolbarView[] | null;
+  view?: string;
+  defaultView?: string;
+  onViewChange?: (value: string) => void;
+  /** Main action at the end of the bar; `null` hides it. */
+  primaryAction?: PageChromeAction | null;
+  'aria-label'?: string;
+  className?: string;
+}
+
+const pageToolbarDefaultAction: PageChromeAction = { label: 'New project', icon: Plus };
+
+/** List/table toolbar: search, filters, view toggle and the primary action, with one Tab stop. */
+export function PageToolbar({
+  search,
+  defaultSearch = '',
+  onSearchChange,
+  searchLabel: searchLabelProp,
+  searchPlaceholder = 'Search projects…',
+  filters,
+  views = pageToolbarViews,
+  view,
+  defaultView,
+  onViewChange,
+  primaryAction = pageToolbarDefaultAction,
+  'aria-label': ariaLabelProp,
+  className,
+}: PageToolbarProps) {
+  const { t } = useI18n();
+  const searchLabel = searchLabelProp ?? t('common.search');
+  const ariaLabel = ariaLabelProp ?? t('toolbar.label');
+  const [innerSearch, setInnerSearch] = useState(defaultSearch);
+  const [innerView, setInnerView] = useState(defaultView ?? views?.[0]?.value ?? '');
+  const currentSearch = search ?? innerSearch;
+  const currentView = view ?? innerView;
+
+  return (
+    <Toolbar aria-label={ariaLabel} className={cn('flex-wrap gap-y-2', className)}>
+      <ToolbarStart className="min-w-0 flex-1 basis-60">
+        <ToolbarInput
+          type="search"
+          icon={Search}
+          aria-label={searchLabel}
+          placeholder={searchPlaceholder}
+          value={currentSearch}
+          onChange={(e) => {
+            setInnerSearch(e.target.value);
+            onSearchChange?.(e.target.value);
+          }}
+          wrapperClassName="max-w-sm"
+        />
+        {filters !== undefined ? (
+          filters
+        ) : (
+          <ToolbarButton variant="secondary" icon={SlidersHorizontal}>
+            Filters
+          </ToolbarButton>
+        )}
+      </ToolbarStart>
+      <ToolbarEnd>
+        {views && views.length > 0 && (
+          <>
+            <ToggleGroup
+              aria-label={t('toolbar.view')}
+              size="sm"
+              value={[currentView]}
+              onValueChange={(next) => {
+                const picked = next[0];
+                if (!picked) return; // keep one view selected
+                setInnerView(picked);
+                onViewChange?.(picked);
+              }}
+            >
+              {views.map((v) => (
+                <ToolbarButton
+                  key={v.value}
+                  render={<Toggle value={v.value} iconOnly size="sm" />}
+                  aria-label={v.label}
+                  icon={v.icon}
+                  className="size-7 rounded-md data-pressed:bg-secondary data-pressed:text-foreground"
+                />
+              ))}
+            </ToggleGroup>
+            {primaryAction && <ToolbarSeparator />}
+          </>
+        )}
+        {primaryAction && (
+          <ToolbarButton
+            variant={primaryAction.variant ?? 'primary'}
+            icon={primaryAction.icon}
+            disabled={primaryAction.disabled}
+            onClick={primaryAction.onClick}
+          >
+            {primaryAction.label}
+          </ToolbarButton>
+        )}
+      </ToolbarEnd>
+    </Toolbar>
+  );
+}

package/src/page-chrome/PageToolbar/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Page toolbar',
+  family: 'page-chrome',
+  status: 'beta',
+  description:
+    'Toolbar above a list or table: search, a filters slot, a view toggle and the primary action, with roving focus.',
+  uses: ['Toolbar', 'ToolbarInput', 'ToolbarButton', 'ToggleGroup', 'Toggle'],
+};

package/src/page-chrome/PageToolbar/fixtures.ts

@@ -0,0 +1,8 @@
+import { LayoutGrid, List, Table2 } from '@gntik-ai/icons';
+import type { PageToolbarView } from './PageToolbar';
+
+export const pageToolbarViews: PageToolbarView[] = [
+  { value: 'table', label: 'Table view', icon: Table2 },
+  { value: 'list', label: 'List view', icon: List },
+  { value: 'grid', label: 'Grid view', icon: LayoutGrid },
+];

package/src/page-chrome/SectionHeader/SectionHeader.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SectionHeader } from './SectionHeader';
+
+describe('SectionHeader', () => {
+  it('renders the default header', async () => {
+    const { container } = render(<SectionHeader />);
+    expect(screen.getByRole('heading', { level: 2, name: 'Policies' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('shows a count and runs its actions', async () => {
+    const onInvite = vi.fn();
+    render(
+      <SectionHeader
+        title="Members"
+        as="h3"
+        count={8}
+        actions={[{ label: 'Invite', variant: 'soft', onClick: onInvite }]}
+      />,
+    );
+    expect(screen.getByRole('heading', { level: 3, name: 'Members' })).toBeInTheDocument();
+    expect(screen.getByText('8')).toBeInTheDocument();
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Invite' }));
+    expect(onInvite).toHaveBeenCalledTimes(1);
+  });
+});