@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/settings-appearance/Page.test.tsx

@@ -0,0 +1,44 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsAppearancePage from './Page';
+
+const renderPage = (props: Parameters<typeof SettingsAppearancePage>[0] = {}) =>
+  render(
+    <ThemeProvider storageKey={null}>
+      <SettingsAppearancePage {...props} />
+    </ThemeProvider>,
+  );
+
+describe('SettingsAppearancePage', () => {
+  it('renders theme, density and language', () => {
+    renderPage();
+    expect(screen.getByRole('heading', { level: 1, name: 'Appearance' })).toBeInTheDocument();
+    expect(screen.getAllByRole('group', { name: 'Theme' }).length).toBeGreaterThan(0);
+    expect(screen.getByRole('group', { name: 'Density' })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: 'Language' })).toBeInTheDocument();
+  }, 15000);
+
+  it('switches the theme through useTheme', async () => {
+    renderPage();
+    const display = screen.getByRole('region', { name: 'Display' });
+    const light = within(display).getByRole('button', { name: 'Light' });
+    await userEvent.click(light);
+    expect(document.documentElement).not.toHaveClass('dark');
+    expect(light).toHaveAttribute('aria-pressed', 'true');
+  }, 15000);
+
+  it('changes density', async () => {
+    const onDensityChange = vi.fn();
+    renderPage({ onDensityChange });
+    await userEvent.click(screen.getByRole('button', { name: 'Compact' }));
+    expect(onDensityChange).toHaveBeenCalledWith('compact');
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = renderPage();
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-appearance/Page.tsx

@@ -0,0 +1,92 @@
+import { SettingsRow } from '@gntik-ai/blocks';
+import { Section, SimpleSelect, ThemeSwitcher, Toggle, ToggleGroup, useTheme } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import { THEME_LABELS, densities, languages as defaultLanguages, type Density, type LanguageOption } from './data';
+
+export interface SettingsAppearanceProps extends SettingsFrameOptions {
+  density: Density;
+  onDensityChange: (density: Density) => void;
+  language: string;
+  languages: LanguageOption[];
+  onLanguageChange: (language: string) => void;
+}
+
+/**
+ * Appearance settings: ThemeSwitcher (reads and sets the mode through useTheme, so it needs the
+ * app's ThemeProvider), density ToggleGroup and language Select, laid out as SettingsRows.
+ */
+export default function SettingsAppearancePage({
+  density: initialDensity = 'comfortable',
+  onDensityChange,
+  language: initialLanguage = 'en',
+  languages = defaultLanguages,
+  onLanguageChange,
+  ...frame
+}: Partial<SettingsAppearanceProps>) {
+  const { mode, resolved } = useTheme();
+  const [density, setDensity] = useState<Density>(initialDensity);
+  const [language, setLanguage] = useState(initialLanguage);
+
+  return (
+    <SettingsFrame
+      page="appearance"
+      description="How the interface looks on this device. Saved automatically."
+      {...frame}
+    >
+      <Section title="Display" divided>
+        <SettingsRow
+          label="Theme"
+          description={
+            mode === 'system'
+              ? `Follows your system setting (now ${THEME_LABELS[resolved]}).`
+              : 'Dark is the default. High contrast strengthens borders and text.'
+          }
+          control={<ThemeSwitcher label="Theme" />}
+        />
+        <SettingsRow
+          label="Density"
+          description="Compact fits more rows in tables and lists."
+          control={({ labelId, descriptionId }) => (
+            <ToggleGroup
+              size="sm"
+              aria-labelledby={labelId}
+              aria-describedby={descriptionId}
+              value={[density]}
+              onValueChange={(v) => {
+                const next = v[0] as Density | undefined;
+                if (!next) return;
+                setDensity(next);
+                onDensityChange?.(next);
+              }}
+            >
+              {densities.map((d) => (
+                <Toggle key={d.value} value={d.value}>
+                  {d.label}
+                </Toggle>
+              ))}
+            </ToggleGroup>
+          )}
+        />
+        <SettingsRow
+          label="Language"
+          description="Used for menus, emails and dates."
+          control={
+            <SimpleSelect
+              aria-label="Language"
+              size="sm"
+              items={languages}
+              value={language}
+              onValueChange={(v) => {
+                if (v == null) return;
+                setLanguage(v);
+                onLanguageChange?.(v);
+              }}
+              className="w-44"
+            />
+          }
+        />
+      </Section>
+    </SettingsFrame>
+  );
+}

package/src/settings-appearance/data.ts

@@ -0,0 +1,21 @@
+export type Density = 'comfortable' | 'compact';
+
+export interface LanguageOption {
+  value: string;
+  label: string;
+}
+
+export const densities: Array<{ value: Density; label: string }> = [
+  { value: 'comfortable', label: 'Comfortable' },
+  { value: 'compact', label: 'Compact' },
+];
+
+export const languages: LanguageOption[] = [
+  { value: 'en', label: 'English' },
+  { value: 'es', label: 'Español' },
+  { value: 'pt', label: 'Português' },
+  { value: 'de', label: 'Deutsch' },
+  { value: 'fr', label: 'Français' },
+];
+
+export const THEME_LABELS = { dark: 'Dark', light: 'Light', high_contrast: 'High contrast' } as const;

package/src/settings-appearance/template.meta.ts

@@ -0,0 +1,11 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Appearance settings',
+  family: 'Settings',
+  priority: 'P2',
+  status: 'beta',
+  description: 'Theme switcher wired to the ThemeProvider, table density and interface language.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'settings-row'],
+};

package/src/settings-billing/Page.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsBillingPage from './Page';
+
+describe('SettingsBillingPage', () => {
+  it('renders plan, usage, payment and invoices', () => {
+    render(<SettingsBillingPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Billing' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Scale plan' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Payment method' })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Plan' })).toBeNull();
+    expect(screen.getByRole('region', { name: 'Plan quotas' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Invoices' })).toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  }, 15000);
+
+  it('switches the billing cycle', async () => {
+    const onCycleChange = vi.fn();
+    render(<SettingsBillingPage onCycleChange={onCycleChange} />);
+    await userEvent.click(screen.getByRole('button', { name: /^Annual/ }));
+    expect(onCycleChange).toHaveBeenCalledWith('annual');
+    expect(screen.getByText(/Billed annually/)).toBeInTheDocument();
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsBillingPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-billing/Page.tsx

@@ -0,0 +1,71 @@
+import {
+  InvoiceTable,
+  PaymentMethodCard,
+  PlanCard,
+  QuotaMeters,
+  type BillingCycle,
+  type BillingPlan,
+  type Invoice,
+  type PaymentMethod,
+  type Quota,
+} from '@gntik-ai/blocks';
+import { Section } from '@gntik-ai/ui';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import {
+  invoices as defaultInvoices,
+  paymentMethod as defaultPaymentMethod,
+  plan as defaultPlan,
+  quotas as defaultQuotas,
+} from './data';
+
+export interface SettingsBillingProps extends SettingsFrameOptions {
+  plan: BillingPlan;
+  quotas: Quota[];
+  paymentMethod: PaymentMethod;
+  invoices: Invoice[];
+  /** ISO 4217 code for the invoice table. */
+  currency: string;
+  onUpgrade: () => void;
+  onManagePlan: () => void;
+  onCycleChange: (cycle: BillingCycle) => void;
+  onUpdatePaymentMethod: () => void;
+  onDownloadInvoice: (invoice: Invoice) => void;
+}
+
+/** Billing settings: PlanCard, QuotaMeters, PaymentMethodCard and InvoiceTable. */
+export default function SettingsBillingPage({
+  plan = defaultPlan,
+  quotas = defaultQuotas,
+  paymentMethod = defaultPaymentMethod,
+  invoices = defaultInvoices,
+  currency = 'USD',
+  onUpgrade,
+  onManagePlan,
+  onCycleChange,
+  onUpdatePaymentMethod,
+  onDownloadInvoice,
+  ...frame
+}: Partial<SettingsBillingProps>) {
+  return (
+    <SettingsFrame
+      page="billing"
+      width="wide"
+      description="Your plan, usage this cycle, payment method and invoices."
+      {...frame}
+    >
+      <PlanCard titleAs="h2" plan={plan} onUpgrade={onUpgrade} onManage={onManagePlan} onCycleChange={onCycleChange} />
+      <Section title="Usage" description="Resets at the start of each billing cycle.">
+        <QuotaMeters quotas={quotas} title="Plan quotas" />
+      </Section>
+      <PaymentMethodCard
+        titleAs="h2"
+        method={paymentMethod}
+        description="Charged on the first day of each cycle."
+        onUpdate={onUpdatePaymentMethod}
+      />
+      <Section title="Invoices">
+        <InvoiceTable invoices={invoices} currency={currency} onDownload={onDownloadInvoice} />
+      </Section>
+    </SettingsFrame>
+  );
+}

package/src/settings-billing/data.ts

@@ -0,0 +1,15 @@
+import {
+  sampleInvoices,
+  samplePaymentMethod,
+  samplePlan,
+  sampleQuotas,
+  type BillingPlan,
+  type Invoice,
+  type PaymentMethod,
+  type Quota,
+} from '@gntik-ai/blocks';
+
+export const plan: BillingPlan = samplePlan;
+export const quotas: Quota[] = sampleQuotas;
+export const paymentMethod: PaymentMethod = samplePaymentMethod;
+export const invoices: Invoice[] = sampleInvoices;

package/src/settings-billing/template.meta.ts

@@ -0,0 +1,19 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Billing settings',
+  family: 'Settings',
+  priority: 'P2',
+  status: 'beta',
+  description: 'Current plan with billing cycle, quota meters, the default payment method and invoice history.',
+  layout: 'SettingsLayout',
+  blocks: [
+    'app-sidebar',
+    'app-topbar',
+    'page-header',
+    'plan-card',
+    'quota-meters',
+    'payment-method-card',
+    'invoice-table',
+  ],
+};

package/src/settings-integrations/Page.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsIntegrationsPage from './Page';
+
+describe('SettingsIntegrationsPage', () => {
+  it('renders connectors, endpoints and deliveries', () => {
+    render(<SettingsIntegrationsPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Integrations' })).toBeInTheDocument();
+    expect(screen.getByText('3 of 6 connected.')).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Webhook endpoints' })).toBeInTheDocument();
+    expect(within(screen.getByRole('table', { name: 'Webhook deliveries' })).getAllByRole('row')).toHaveLength(7);
+  }, 15000);
+
+  it('toggles a connector', async () => {
+    const onConnectorChange = vi.fn();
+    render(<SettingsIntegrationsPage onConnectorChange={onConnectorChange} />);
+    const toggle = screen.getByRole('switch', { name: 'Issue tracker' });
+    expect(toggle).not.toBeChecked();
+    await userEvent.click(toggle);
+    expect(toggle).toBeChecked();
+    expect(onConnectorChange).toHaveBeenCalledWith('issues', true);
+    expect(screen.getByText('4 of 6 connected.')).toBeInTheDocument();
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsIntegrationsPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-integrations/Page.tsx

@@ -0,0 +1,185 @@
+import { SettingsRow } from '@gntik-ai/blocks';
+import { Plus } from '@gntik-ai/icons';
+import {
+  Badge,
+  Card,
+  Grid,
+  Section,
+  SimpleSelect,
+  StatusTag,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Timestamp,
+  type StatusDefinition,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import {
+  connectors as defaultConnectors,
+  webhookDeliveries,
+  webhookEndpoints,
+  type Connector,
+  type WebhookDelivery,
+  type WebhookEndpoint,
+} from './data';
+
+export interface SettingsIntegrationsProps extends SettingsFrameOptions {
+  connectors: Connector[];
+  endpoints: WebhookEndpoint[];
+  deliveries: WebhookDelivery[];
+  onConnectorChange: (connectorId: string, enabled: boolean) => void;
+  onAddEndpoint: () => void;
+}
+
+const ENDPOINT_STATUSES: Record<string, StatusDefinition> = {
+  active: { label: 'Active', tone: 'success' },
+  paused: { label: 'Paused', tone: 'neutral' },
+  failing: { label: 'Failing', tone: 'destructive' },
+};
+
+const deliveryTone = (code: number | null) =>
+  code == null || code >= 500 ? 'destructive' : code >= 400 ? 'warning' : 'success';
+
+/** Integrations settings: connector cards (SettingsRow switches), webhook endpoints Table, delivery log Table. */
+export default function SettingsIntegrationsPage({
+  connectors = defaultConnectors,
+  endpoints = webhookEndpoints,
+  deliveries = webhookDeliveries,
+  onConnectorChange,
+  onAddEndpoint,
+  ...frame
+}: Partial<SettingsIntegrationsProps>) {
+  const [enabled, setEnabled] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(connectors.map((c) => [c.id, c.enabled])),
+  );
+  const [endpointFilter, setEndpointFilter] = useState('all');
+  const shown = endpointFilter === 'all' ? deliveries : deliveries.filter((d) => d.endpointId === endpointFilter);
+  const urlOf = (id: string) => endpoints.find((e) => e.id === id)?.url ?? id;
+  const connectedCount = Object.values(enabled).filter(Boolean).length;
+
+  const toggle = (id: string, on: boolean) => {
+    setEnabled((s) => ({ ...s, [id]: on }));
+    onConnectorChange?.(id, on);
+  };
+
+  return (
+    <SettingsFrame
+      page="integrations"
+      width="wide"
+      description="Connect the workspace to other tools and send events to your own endpoints."
+      actions={[{ label: 'Add endpoint', icon: Plus, variant: 'primary', onClick: onAddEndpoint }]}
+      {...frame}
+    >
+      <Section title="Connectors" description={`${connectedCount} of ${connectors.length} connected.`}>
+        <Grid cols={{ base: 1, md: 2 }} gap={4}>
+          {connectors.map(({ id, name, description, icon: ConnectorIcon }) => (
+            <Card key={id} className="px-5">
+              <SettingsRow
+                label={
+                  <span className="flex items-center gap-2.5">
+                    <ConnectorIcon size={16} aria-hidden className="text-muted-foreground" />
+                    {name}
+                  </span>
+                }
+                description={description}
+                checked={enabled[id] ?? false}
+                onCheckedChange={(on) => toggle(id, on)}
+              >
+                <Badge size="sm" tone={enabled[id] ? 'success' : 'neutral'} dot className="mt-2">
+                  {enabled[id] ? 'Connected' : 'Off'}
+                </Badge>
+              </SettingsRow>
+            </Card>
+          ))}
+        </Grid>
+      </Section>
+      <Section title="Webhook endpoints" description="We sign every request; retries back off for up to 24 hours.">
+        <Table className="min-w-[620px]">
+          <TableCaption srOnly>Webhook endpoints</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Endpoint</TableHead>
+              <TableHead>Events</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead align="right">Last delivery</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {endpoints.map((e) => (
+              <TableRow key={e.id}>
+                <TableCell className="font-mono text-[12px] text-foreground">{e.url}</TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {e.events.map((ev) => (
+                      <Badge key={ev} size="sm" className="font-mono">
+                        {ev}
+                      </Badge>
+                    ))}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <StatusTag status={e.status} statuses={ENDPOINT_STATUSES} />
+                </TableCell>
+                <TableCell align="right" className="text-muted-foreground">
+                  {e.lastDeliveryAt ? <Timestamp value={e.lastDeliveryAt} tooltip={false} /> : 'Never'}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Section>
+      <Section
+        title="Recent deliveries"
+        actions={
+          <SimpleSelect
+            aria-label="Filter deliveries by endpoint"
+            size="sm"
+            items={[
+              { value: 'all', label: 'All endpoints' },
+              ...endpoints.map((e) => ({ value: e.id, label: e.url.replace('https://', '') })),
+            ]}
+            value={endpointFilter}
+            onValueChange={(v) => setEndpointFilter(v ?? 'all')}
+          />
+        }
+      >
+        <Table density="compact" className="min-w-[620px]">
+          <TableCaption srOnly>Webhook deliveries</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Response</TableHead>
+              <TableHead>Event</TableHead>
+              <TableHead>Endpoint</TableHead>
+              <TableHead align="right">Duration</TableHead>
+              <TableHead align="right">Sent</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {shown.map((d) => (
+              <TableRow key={d.id}>
+                <TableCell>
+                  <Badge size="sm" tone={deliveryTone(d.statusCode)} dot className="font-mono">
+                    {d.statusCode ?? 'Timeout'}
+                  </Badge>
+                </TableCell>
+                <TableCell className="font-mono text-[12px]">{d.event}</TableCell>
+                <TableCell className="font-mono text-[12px] text-muted-foreground">{urlOf(d.endpointId)}</TableCell>
+                <TableCell align="right" className="tabular-nums">
+                  {d.durationMs} ms
+                </TableCell>
+                <TableCell align="right" className="text-muted-foreground">
+                  <Timestamp value={d.at} tooltip={false} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Section>
+    </SettingsFrame>
+  );
+}

package/src/settings-integrations/data.ts

@@ -0,0 +1,116 @@
+import { BellRing, Database, GitBranch, HardDrive, ListTodo, MessageSquare, type LucideIcon } from '@gntik-ai/icons';
+
+const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString();
+
+export interface Connector {
+  id: string;
+  name: string;
+  description: string;
+  icon: LucideIcon;
+  enabled: boolean;
+}
+
+export interface WebhookEndpoint {
+  id: string;
+  url: string;
+  events: string[];
+  status: 'active' | 'paused' | 'failing';
+  /** ISO date of the last delivery attempt. */
+  lastDeliveryAt: string | null;
+}
+
+export interface WebhookDelivery {
+  id: string;
+  endpointId: string;
+  event: string;
+  /** HTTP status code returned by the endpoint; null on timeout. */
+  statusCode: number | null;
+  durationMs: number;
+  /** ISO date. */
+  at: string;
+}
+
+export const connectors: Connector[] = [
+  {
+    id: 'chat',
+    name: 'Team chat',
+    description: 'Post deployment and incident updates to a channel.',
+    icon: MessageSquare,
+    enabled: true,
+  },
+  {
+    id: 'source',
+    name: 'Source control',
+    description: 'Build previews for every pull request.',
+    icon: GitBranch,
+    enabled: true,
+  },
+  {
+    id: 'issues',
+    name: 'Issue tracker',
+    description: 'Link deployments to the issues they close.',
+    icon: ListTodo,
+    enabled: false,
+  },
+  {
+    id: 'paging',
+    name: 'Incident paging',
+    description: 'Page the on-call member when a deployment fails.',
+    icon: BellRing,
+    enabled: false,
+  },
+  {
+    id: 'warehouse',
+    name: 'Data warehouse',
+    description: 'Export usage and audit events every night.',
+    icon: Database,
+    enabled: true,
+  },
+  {
+    id: 'storage',
+    name: 'Object storage',
+    description: 'Archive build logs and artifacts to your bucket.',
+    icon: HardDrive,
+    enabled: false,
+  },
+];
+
+export const webhookEndpoints: WebhookEndpoint[] = [
+  {
+    id: 'wh1',
+    url: 'https://hooks.example.com/deployments',
+    events: ['deployment.succeeded', 'deployment.failed'],
+    status: 'active',
+    lastDeliveryAt: minutesAgo(3),
+  },
+  {
+    id: 'wh2',
+    url: 'https://ops.example.net/alerts',
+    events: ['incident.opened'],
+    status: 'failing',
+    lastDeliveryAt: minutesAgo(18),
+  },
+  {
+    id: 'wh3',
+    url: 'https://billing.example.org/usage',
+    events: ['usage.threshold'],
+    status: 'paused',
+    lastDeliveryAt: minutesAgo(60 * 24 * 6),
+  },
+];
+
+export const webhookDeliveries: WebhookDelivery[] = [
+  { id: 'd1', endpointId: 'wh1', event: 'deployment.succeeded', statusCode: 200, durationMs: 142, at: minutesAgo(3) },
+  { id: 'd2', endpointId: 'wh2', event: 'incident.opened', statusCode: 503, durationMs: 2010, at: minutesAgo(18) },
+  { id: 'd3', endpointId: 'wh1', event: 'deployment.failed', statusCode: 200, durationMs: 188, at: minutesAgo(46) },
+  { id: 'd4', endpointId: 'wh2', event: 'incident.opened', statusCode: null, durationMs: 10000, at: minutesAgo(52) },
+  { id: 'd5', endpointId: 'wh1', event: 'deployment.succeeded', statusCode: 204, durationMs: 97, at: minutesAgo(130) },
+  {
+    id: 'd6',
+    endpointId: 'wh3',
+    event: 'usage.threshold',
+    statusCode: 200,
+    durationMs: 311,
+    at: minutesAgo(60 * 24 * 6),
+  },
+];

package/src/settings-integrations/template.meta.ts

@@ -0,0 +1,11 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Integrations settings',
+  family: 'Settings',
+  priority: 'P2',
+  status: 'beta',
+  description: 'Connector cards with on/off switches, webhook endpoints and a filterable delivery log.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'settings-row'],
+};