@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/tables/TruncatedCollectionFooter/TruncatedCollectionFooter.test.tsx

@@ -0,0 +1,159 @@
+import { render, screen } from '@testing-library/react';
+import { I18nProvider } from '@gntik-ai/ui';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { TruncatedCollectionFooter, type TruncatedCollectionFooterProps } from './TruncatedCollectionFooter';
+import ExactExample from './examples/exact';
+import HasMoreExample from './examples/has-more';
+
+// Compile-time checks of the public presentation-only contract.
+function propContract() {
+  // @ts-expect-error visibleCount and hasMore are required for consumers
+  <TruncatedCollectionFooter />;
+  // @ts-expect-error no total is accepted
+  <TruncatedCollectionFooter visibleCount={37} hasMore={false} total={97} />;
+  // @ts-expect-error no page count is accepted
+  <TruncatedCollectionFooter visibleCount={37} hasMore={false} pageCount={10} />;
+  // @ts-expect-error no current page is accepted
+  <TruncatedCollectionFooter visibleCount={37} hasMore={false} page={1} />;
+  // @ts-expect-error no navigation handlers are accepted
+  <TruncatedCollectionFooter visibleCount={37} hasMore={false} onPageChange={() => {}} />;
+  // @ts-expect-error no event handlers are accepted
+  <TruncatedCollectionFooter visibleCount={37} hasMore={false} onClick={() => {}} />;
+}
+void propContract;
+
+describe('TruncatedCollectionFooter', () => {
+  it('shows the exact loaded count without a truncation note', () => {
+    const { container } = render(<TruncatedCollectionFooter visibleCount={37} hasMore={false} />);
+    expect(screen.getByText('37', { exact: true })).toBeVisible();
+    expect(container).not.toHaveTextContent('+');
+    expect(screen.queryByText(/Only the first/)).not.toBeInTheDocument();
+    expect(container.querySelectorAll('p')).toHaveLength(1);
+  });
+
+  it('shows a lower bound and a readable, linkable truncation note', () => {
+    const { container } = render(<TruncatedCollectionFooter visibleCount={100} hasMore={true} noteId="loaded-note" />);
+    expect(screen.getByText('100+', { exact: true })).toBeVisible();
+    expect(screen.getByText('items:')).toBeVisible();
+    const note = screen.getByText('Only the first 100 items are shown; more exist.');
+    expect(note).toHaveAttribute('id', 'loaded-note');
+    expect(container.querySelector('[aria-hidden], [aria-live]')).toBeNull();
+  });
+
+  it('lets consumers replace every visible string with plain text nodes', () => {
+    const { container } = render(
+      <TruncatedCollectionFooter
+        visibleCount={100}
+        hasMore={true}
+        summaryLabel="Loaded records"
+        formatCount={(count, hasMore) => <span>{hasMore ? `At least ${count}` : `Exactly ${count}`}</span>}
+        truncationNote={(count) => <span>{`Showing ${count} records from the first page.`}</span>}
+        className="gap-2.5"
+      />,
+    );
+    expect(screen.getByText('Loaded records')).toBeVisible();
+    expect(screen.getByText('At least 100')).toBeVisible();
+    expect(screen.getByText('Showing 100 records from the first page.')).toBeVisible();
+    expect(container).not.toHaveTextContent('items:');
+    expect(container).not.toHaveTextContent('Only the first');
+    expect(container.firstElementChild).toHaveClass('gap-2.5');
+  });
+
+  it('formats counts in the chosen locale and uses the supplied noun', () => {
+    render(<TruncatedCollectionFooter visibleCount={12345} hasMore={true} noun="records" locale="de-DE" />);
+    expect(screen.getByText('12.345+', { exact: true })).toBeVisible();
+    expect(screen.getByText('records:')).toBeVisible();
+    expect(screen.getByText('Only the first 12.345 records are shown; more exist.')).toBeVisible();
+  });
+
+  it('inherits Spanish defaults and number formatting from the provider', () => {
+    render(
+      <I18nProvider locale="es">
+        <TruncatedCollectionFooter visibleCount={12345} hasMore={true} />
+      </I18nProvider>,
+    );
+    expect(screen.getByText('12.345+', { exact: true })).toBeVisible();
+    expect(screen.getByText('elementos:')).toBeVisible();
+    expect(screen.getByText('Solo se muestran los primeros 12.345 elementos; hay más.')).toBeVisible();
+  });
+
+  it('renders a meaningful no-props catalogue preview at runtime', () => {
+    // The JavaScript preview loader passes no props; consumers still require both inputs.
+    render(<TruncatedCollectionFooter {...({} as TruncatedCollectionFooterProps)} />);
+    expect(screen.getByText('37', { exact: true })).toBeVisible();
+    expect(screen.getByText('items:')).toBeVisible();
+    expect(screen.queryByText(/Only the first/)).not.toBeInTheDocument();
+  });
+
+  it('accepts a static note and an empty label without restoring default copy', () => {
+    render(
+      <TruncatedCollectionFooter
+        visibleCount={100}
+        hasMore={true}
+        summaryLabel={null}
+        truncationNote="More records exist outside this view."
+      />,
+    );
+    expect(screen.getByText('More records exist outside this view.')).toBeVisible();
+    expect(screen.queryByText('items:')).not.toBeInTheDocument();
+  });
+
+  it('does not render or evaluate the note when the loaded count is exact', () => {
+    const { container } = render(
+      <TruncatedCollectionFooter
+        visibleCount={37}
+        hasMore={false}
+        formatCount={(count, hasMore) => `${count}${hasMore ? ' or more' : ' exact'}`}
+        truncationNote={() => {
+          throw new Error('The exact state must not evaluate its note');
+        }}
+        noteId="absent-note"
+      />,
+    );
+    expect(screen.getByText('37 exact')).toBeVisible();
+    expect(container.querySelector('#absent-note')).toBeNull();
+    expect(container.querySelectorAll('p')).toHaveLength(1);
+  });
+
+  it.each([
+    ['en', 'item:', 'Only the first 1 item is shown; more exist.'],
+    ['es', 'elemento:', 'Solo se muestra el primer 1 elemento; hay más.'],
+  ])('uses singular catalogue defaults in %s', (locale, label, note) => {
+    render(
+      <I18nProvider locale={locale}>
+        <TruncatedCollectionFooter visibleCount={1} hasMore={true} />
+      </I18nProvider>,
+    );
+    expect(screen.getByText(label)).toBeVisible();
+    expect(screen.getByText(note)).toBeVisible();
+  });
+
+  it.each([true, false])('has no controls, navigation or Tab stops with hasMore=%s', async (hasMore) => {
+    const user = userEvent.setup();
+    const { container } = render(<TruncatedCollectionFooter visibleCount={100} hasMore={hasMore} />);
+    for (const role of ['navigation', 'button', 'link', 'combobox', 'textbox']) {
+      expect(screen.queryAllByRole(role)).toHaveLength(0);
+    }
+    expect(container.querySelector('button, a, input, select, textarea, [tabindex], [contenteditable]')).toBeNull();
+    expect(container.querySelector('[aria-hidden], [aria-live]')).toBeNull();
+    await user.tab();
+    expect(document.body).toHaveFocus();
+  });
+
+  for (const theme of ['dark', 'light', 'high_contrast']) {
+    it.each([
+      ['exact', ExactExample],
+      ['has-more', HasMoreExample],
+    ] as const)(`has no axe violations in ${theme} / %s`, async (_state, Example) => {
+      const previousTheme = document.documentElement.className;
+      document.documentElement.className = theme;
+      try {
+        const { container } = render(<Example />);
+        await expectNoAxeViolations(container);
+      } finally {
+        document.documentElement.className = previousTheme;
+      }
+    });
+  }
+});

package/src/tables/TruncatedCollectionFooter/TruncatedCollectionFooter.tsx

@@ -0,0 +1,60 @@
+import { cn, useI18n } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { TRUNCATED_COLLECTION_PREVIEW } from './fixtures';
+
+export interface TruncatedCollectionFooterProps {
+  /** Number of records already loaded; never an estimated total. */
+  visibleCount: number;
+  /** More records exist beyond this first page, making the count a lower bound. */
+  hasMore: boolean;
+  /** Localized noun used in the default summary label and note. */
+  noun?: string;
+  /** Number-formatting locale; translated defaults come from I18nProvider. */
+  locale?: string;
+  /** Plain text label before the count; null hides it. */
+  summaryLabel?: ReactNode;
+  /** Replaces the entire count, including the lower-bound marker. Return plain text nodes. */
+  formatCount?: (count: number, hasMore: boolean) => ReactNode;
+  /** Plain text note or formatter, rendered only when hasMore is true. */
+  truncationNote?: ((count: number) => ReactNode) | ReactNode;
+  /** Id of the note for a consumer's aria-describedby reference. */
+  noteId?: string;
+  className?: string;
+}
+
+/** Static first-page summary with no total, navigation, focus stops or live region. */
+export function TruncatedCollectionFooter({
+  visibleCount = TRUNCATED_COLLECTION_PREVIEW.visibleCount,
+  hasMore = TRUNCATED_COLLECTION_PREVIEW.hasMore,
+  noun: nounProp,
+  locale: localeProp,
+  summaryLabel,
+  formatCount,
+  truncationNote,
+  noteId,
+  className,
+}: TruncatedCollectionFooterProps) {
+  const { t, locale: providerLocale } = useI18n();
+  const locale = localeProp ?? providerLocale;
+  const noun = nounProp ?? t('table.collectionNoun', { count: visibleCount });
+  const formattedCount = visibleCount.toLocaleString(locale);
+  return (
+    <div className={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}>
+      <p className="text-[12.5px] text-muted-foreground tabular-nums">
+        {summaryLabel === undefined ? t('table.visibleCount', { noun }) : summaryLabel}{' '}
+        <span className="font-mono text-foreground">
+          {formatCount ? formatCount(visibleCount, hasMore) : `${formattedCount}${hasMore ? '+' : ''}`}
+        </span>
+      </p>
+      {hasMore && (
+        <p id={noteId} className="text-[12.5px] text-muted-foreground">
+          {typeof truncationNote === 'function'
+            ? truncationNote(visibleCount)
+            : truncationNote === undefined
+              ? t('table.truncatedNote', { count: visibleCount, formattedCount, noun })
+              : truncationNote}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/tables/TruncatedCollectionFooter/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Truncated collection footer',
+  family: 'tables',
+  status: 'beta',
+  description:
+    'Presentation-only summary of a loaded first cursor page without a total or pager. N+ is a lower bound when hasMore is true; the note explains that more items exist. Compose below data-table (DataTable with paginated={false}). First-page recipe: use hasMore={true} for N+ plus a note, and supply noteId so a consumer table can reference it with aria-describedby. DataTable does not forward aria-describedby; its named containing region can reference the note instead. Count-only recipe: use hasMore={false} for the visible count without a note. PageToolbar has no count prop; this block carries the count. No navigation or focusable elements. Every visible string is overridable through noun, summaryLabel, formatCount and truncationNote; ReactNode overrides must remain plain text without interactive or hidden content. The i18n provider supplies translated defaults; locale overrides number formatting. Required inputs are visibleCount and hasMore, with meaningful runtime defaults for the JavaScript catalogue preview.',
+  uses: [],
+};

package/src/tables/TruncatedCollectionFooter/examples/exact.tsx

@@ -0,0 +1,6 @@
+import { TruncatedCollectionFooter } from '../TruncatedCollectionFooter';
+
+/** Count-only recipe: retain the visible count without introducing truncation messaging. */
+export default function ExactExample() {
+  return <TruncatedCollectionFooter visibleCount={37} hasMore={false} noun="records" />;
+}

package/src/tables/TruncatedCollectionFooter/examples/has-more.tsx

@@ -0,0 +1,12 @@
+import { TruncatedCollectionFooter } from '../TruncatedCollectionFooter';
+
+/**
+ * First-page recipe: place below DataTable with paginated={false}.
+ * A consumer table can reference this note with aria-describedby="records-truncation-note".
+ * DataTable does not forward aria-describedby; a named containing region can reference it instead.
+ */
+export default function HasMoreExample() {
+  return (
+    <TruncatedCollectionFooter visibleCount={100} hasMore={true} noun="records" noteId="records-truncation-note" />
+  );
+}

package/src/tables/TruncatedCollectionFooter/fixtures.ts

@@ -0,0 +1,2 @@
+/** Meaningful runtime defaults for the JavaScript catalogue preview. */
+export const TRUNCATED_COLLECTION_PREVIEW = { visibleCount: 37, hasMore: false } as const;

package/src/tables/index.ts

@@ -0,0 +1,45 @@
+// @gntik-ai/blocks — tables family.
+export * from './DataTable/DataTable';
+export * from './DataTable/data-table-utils';
+export { ColumnVisibilityMenu, type ColumnVisibilityMenuProps } from './DataTable/column-menu';
+export { DensityToggle, type DensityToggleProps } from './DataTable/density-toggle';
+export {
+  clampColumnWidth,
+  columnWidthOf,
+  orderColumns,
+  setColumnPin,
+  DEFAULT_COLUMN_WIDTH,
+  MIN_COLUMN_WIDTH,
+  MAX_COLUMN_WIDTH,
+  type ColumnWidths,
+  type PinnedColumns,
+  type PinSide,
+} from './DataTable/column-sizing';
+export { ColumnResizeHandle, type ColumnResizeHandleProps } from './DataTable/resize-handle';
+export {
+  EditableCell,
+  type DataTableCellEdit,
+  type DataTableCellEditResult,
+  type DataTableCellEditHandler,
+} from './DataTable/editable-cell';
+export {
+  ViewSwitcher as DataTableViewSwitcher,
+  sameViewState,
+  type ViewSwitcherProps as DataTableViewSwitcherProps,
+  type DataTableView,
+  type DataTableViewState,
+} from './DataTable/views';
+export { meta as dataTableMeta } from './DataTable/block.meta';
+export { DEPLOYMENT_COLUMNS, DEPLOYMENT_ROWS, generateDeployments, type DeploymentRow } from './DataTable/fixtures';
+export * from './FilterBar/FilterBar';
+export { meta as filterBarMeta } from './FilterBar/block.meta';
+export { DEPLOYMENT_DEFAULT_FILTERS, DEPLOYMENT_FILTER_FIELDS, DEPLOYMENT_SAVED_VIEWS } from './FilterBar/fixtures';
+export * from './PaginationFooter/PaginationFooter';
+export { meta as paginationFooterMeta } from './PaginationFooter/block.meta';
+export * from './TruncatedCollectionFooter/TruncatedCollectionFooter';
+export { meta as truncatedCollectionFooterMeta } from './TruncatedCollectionFooter/block.meta';
+export * from './InlineEditRow/InlineEditRow';
+export { meta as inlineEditRowMeta } from './InlineEditRow/block.meta';
+export { EDITABLE_MEMBER_FIELDS, EDITABLE_MEMBERS, type EditableMember } from './InlineEditRow/fixtures';
+export * from './SubordinateList/SubordinateList';
+export { meta as subordinateListMeta } from './SubordinateList/block.meta';

package/src/team/MembersTable/MembersTable.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { MembersTable } from './MembersTable';
+
+describe('MembersTable', () => {
+  it('renders the members', async () => {
+    const { container } = render(<MembersTable />);
+    const table = screen.getByRole('table', { name: 'Workspace members' });
+    expect(within(table).getAllByRole('row')).toHaveLength(6);
+    expect(screen.getByRole('combobox', { name: 'Role for Avery Collins' })).toHaveAttribute('data-disabled');
+    expect(screen.getByText('Never')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('changes a role and removes a member', async () => {
+    const onRoleChange = vi.fn();
+    const onRemove = vi.fn();
+    render(<MembersTable onRoleChange={onRoleChange} onRemove={onRemove} />);
+    await userEvent.click(screen.getByRole('combobox', { name: 'Role for Jordan Lee' }));
+    await userEvent.click(await screen.findByRole('option', { name: 'Admin' }));
+    expect(onRoleChange).toHaveBeenCalledWith('u3', 'admin');
+
+    await userEvent.click(screen.getByRole('button', { name: 'Actions for Riley Chen' }));
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Remove from workspace' }));
+    expect(onRemove).toHaveBeenCalledWith(expect.objectContaining({ id: 'u4' }));
+    expect(screen.queryByText('Riley Chen')).not.toBeInTheDocument();
+  });
+});

package/src/team/MembersTable/MembersTable.tsx

@@ -0,0 +1,141 @@
+import {
+  Avatar,
+  Badge,
+  MoreMenu,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Timestamp,
+  cn,
+} from '@gntik-ai/ui';
+import { Mail, UserMinus } from '@gntik-ai/icons';
+import { useState } from 'react';
+import { memberRoles, type RoleOption } from '../../forms/InviteMembersDialog/fixtures';
+import { members as defaultMembers, type Member } from './fixtures';
+
+export type { Member } from './fixtures';
+
+export interface MembersTableProps {
+  members?: Member[];
+  roles?: RoleOption[];
+  /** Id of the signed-in member: shown with a "You" badge, and their role and removal are locked. */
+  currentUserId?: string;
+  onRoleChange?: (memberId: string, role: string) => void;
+  onRemove?: (member: Member) => void;
+  onEmail?: (member: Member) => void;
+  /** Table caption (screen-reader only by default). */
+  caption?: string;
+  className?: string;
+}
+
+/** Workspace members: avatar, name and email, inline role select, last activity and a row menu. */
+export function MembersTable({
+  members = defaultMembers,
+  roles = memberRoles,
+  currentUserId = 'u1',
+  onRoleChange,
+  onRemove,
+  onEmail,
+  caption = 'Workspace members',
+  className,
+}: MembersTableProps) {
+  const [roleOverrides, setRoleOverrides] = useState<Record<string, string>>({});
+  const [removed, setRemoved] = useState<string[]>([]);
+  const rows = members.filter((m) => !removed.includes(m.id));
+  const items = roles.map(({ value, label }) => ({ value, label }));
+
+  return (
+    <Table className={cn('min-w-[560px]', className)}>
+      <TableCaption srOnly>{caption}</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Member</TableHead>
+          <TableHead className="w-44">Role</TableHead>
+          <TableHead className="hidden sm:table-cell">Last active</TableHead>
+          <TableHead align="right">
+            <span className="sr-only">Actions</span>
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rows.map((m) => {
+          const you = m.id === currentUserId;
+          const role = roleOverrides[m.id] ?? m.role;
+          return (
+            <TableRow key={m.id}>
+              <TableCell>
+                <div className="flex min-w-0 items-center gap-3">
+                  <Avatar size="sm" name={m.name} src={m.avatarUrl} aria-hidden />
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="truncate text-[13px] font-medium text-foreground">{m.name}</span>
+                      {you && (
+                        <Badge size="sm" tone="primary">
+                          You
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="truncate text-[12px] text-muted-foreground">{m.email}</div>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Select
+                  value={role}
+                  items={items}
+                  disabled={you}
+                  onValueChange={(v) => {
+                    if (v == null) return;
+                    setRoleOverrides((o) => ({ ...o, [m.id]: v }));
+                    onRoleChange?.(m.id, v);
+                  }}
+                >
+                  <SelectTrigger size="sm" aria-label={`Role for ${m.name}`} className="w-full" />
+                  <SelectContent>
+                    {roles.map((r) => (
+                      <SelectItem key={r.value} value={r.value}>
+                        {r.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell className="hidden text-[12.5px] text-muted-foreground sm:table-cell">
+                {m.lastActive ? <Timestamp value={m.lastActive} /> : 'Never'}
+              </TableCell>
+              <TableCell align="right">
+                <MoreMenu
+                  label={`Actions for ${m.name}`}
+                  variant="ghost"
+                  size="sm"
+                  items={[
+                    { label: 'Send email', icon: Mail, onSelect: () => onEmail?.(m) },
+                    'separator',
+                    {
+                      label: 'Remove from workspace',
+                      icon: UserMinus,
+                      destructive: true,
+                      disabled: you,
+                      onSelect: () => {
+                        setRemoved((r) => [...r, m.id]);
+                        onRemove?.(m);
+                      },
+                    },
+                  ]}
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/team/MembersTable/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Members table',
+  family: 'team',
+  status: 'stable',
+  description: 'Workspace members with avatar, email, an inline role select, last activity and a row menu to remove.',
+  uses: ['Table', 'Avatar', 'Badge', 'Select', 'Timestamp', 'MoreMenu'],
+};

package/src/team/MembersTable/fixtures.ts

@@ -0,0 +1,19 @@
+const ago = (minutes: number) => new Date(Date.now() - minutes * 60_000).toISOString();
+
+export interface Member {
+  id: string;
+  name: string;
+  email: string;
+  avatarUrl?: string;
+  role: string;
+  /** ISO date of the last activity; null when the member never signed in. */
+  lastActive: string | null;
+}
+
+export const members: Member[] = [
+  { id: 'u1', name: 'Avery Collins', email: 'avery@example.com', role: 'owner', lastActive: ago(2) },
+  { id: 'u2', name: 'Sam Rivera', email: 'sam@example.com', role: 'admin', lastActive: ago(95) },
+  { id: 'u3', name: 'Jordan Lee', email: 'jordan@example.com', role: 'member', lastActive: ago(60 * 26) },
+  { id: 'u4', name: 'Riley Chen', email: 'riley@example.com', role: 'member', lastActive: ago(60 * 24 * 9) },
+  { id: 'u5', name: 'Morgan Patel', email: 'morgan@example.com', role: 'viewer', lastActive: null },
+];

package/src/team/NotificationMatrix/NotificationMatrix.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { NotificationMatrix } from './NotificationMatrix';
+
+describe('NotificationMatrix', () => {
+  it('renders the grid with mixed column state and locked cells', async () => {
+    const { container } = render(<NotificationMatrix />);
+    expect(screen.getByRole('table', { name: 'Notification preferences' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'All events by Email' })).toHaveAttribute('aria-checked', 'mixed');
+    const locked = screen.getByRole('checkbox', { name: 'Security alerts by Email (always on)' });
+    expect(locked).toBeChecked();
+    expect(locked).toHaveAttribute('aria-disabled', 'true');
+    await expectNoAxeViolations(container);
+  });
+
+  it('toggles cells, rows and columns', async () => {
+    const onValueChange = vi.fn();
+    render(<NotificationMatrix onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Member joined by Push' }));
+    expect(onValueChange).toHaveBeenLastCalledWith(expect.objectContaining({ 'member-joined': ['push'] }));
+
+    await userEvent.click(screen.getByRole('checkbox', { name: 'All channels for Member joined' }));
+    expect(onValueChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ 'member-joined': ['email', 'in-app', 'push'] }),
+    );
+
+    const emailCol = screen.getByRole('checkbox', { name: 'All events by Email' });
+    await userEvent.click(emailCol);
+    expect(emailCol).toBeChecked();
+    await userEvent.click(emailCol);
+    const last = onValueChange.mock.lastCall?.[0] as Record<string, string[]>;
+    expect(last.security).toContain('email');
+    expect(last['deploy-failed']).not.toContain('email');
+  });
+});