@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/index.ts

@@ -0,0 +1,250 @@
+export type { TemplateMeta } from './meta';
+export { ConsoleShell, type ConsoleShellProps } from './shared/ConsoleShell';
+export { default as AcceptInvitationPage } from './accept-invitation/Page';
+export { meta as acceptInvitationTemplateMeta } from './accept-invitation/template.meta';
+export type { AcceptInvitationPageProps } from './accept-invitation/Page';
+export type { Invitation } from './accept-invitation/data';
+export { default as AssistantChatPage } from './assistant-chat/Page';
+export { meta as assistantChatTemplateMeta } from './assistant-chat/template.meta';
+export type { AssistantChatProps } from './assistant-chat/Page';
+export type { AssistantTool } from './assistant-chat/data';
+export { default as AuditLogPage } from './audit-log/Page';
+export { meta as auditLogTemplateMeta } from './audit-log/template.meta';
+export type { AuditLogProps } from './audit-log/Page';
+export type { AuditEvent, AuditResult } from './audit-log/data';
+export { default as CreateWizardPage } from './create-wizard/Page';
+export { meta as createWizardTemplateMeta } from './create-wizard/template.meta';
+export type { CreateWizardProps } from './create-wizard/Page';
+export type { CreateWizardCopy, SourceOption, WizardRegion, WizardValues } from './create-wizard/data';
+export { default as CreateWorkspacePage } from './create-workspace/Page';
+export { meta as createWorkspaceTemplateMeta } from './create-workspace/template.meta';
+export type { CreateWorkspaceProps } from './create-workspace/Page';
+export type { WorkspaceRegion, WorkspaceValues as NewWorkspaceValues } from './create-workspace/data';
+export { default as WorkflowBuilderPage } from './workflow-builder/Page';
+export { meta as workflowBuilderTemplateMeta } from './workflow-builder/template.meta';
+export type { FlowBuilderPageProps } from './workflow-builder/Page';
+export { default as ForgotPasswordPage } from './forgot-password/Page';
+export { meta as forgotPasswordTemplateMeta } from './forgot-password/template.meta';
+export type { ForgotPasswordPageProps } from './forgot-password/Page';
+export { default as GettingStartedPage } from './getting-started/Page';
+export { meta as gettingStartedTemplateMeta } from './getting-started/template.meta';
+export type { GettingStartedProps } from './getting-started/Page';
+export type { DocLink, SetupTask } from './getting-started/data';
+export { default as HomeDashboardPage } from './home-dashboard/Page';
+export { meta as homeDashboardTemplateMeta } from './home-dashboard/template.meta';
+export type { HomeDashboardProps, HomeSecondaryChart } from './home-dashboard/Page';
+export type { QuickAction, RequestPoint } from './home-dashboard/data';
+export { default as LandingPage } from './landing/Page';
+export { meta as landingTemplateMeta } from './landing/template.meta';
+export type { LandingProps } from './landing/Page';
+export { default as MfaPage } from './mfa/Page';
+export { meta as mfaTemplateMeta } from './mfa/template.meta';
+export type { MfaChallengePageProps } from './mfa/Page';
+export { default as NotificationInboxPage } from './notification-inbox/Page';
+export { meta as notificationInboxTemplateMeta } from './notification-inbox/template.meta';
+export type { InboxFilter, NotificationInboxProps } from './notification-inbox/Page';
+export type { InboxCategory, InboxNotification } from './notification-inbox/data';
+export { default as ResetPasswordPage } from './reset-password/Page';
+export { meta as resetPasswordTemplateMeta } from './reset-password/template.meta';
+export type { ResetPasswordPageProps } from './reset-password/Page';
+export { default as ResourceDetailPage } from './resource-detail/Page';
+export { meta as resourceDetailTemplateMeta } from './resource-detail/template.meta';
+export type { ResourceDetailProps, ResourceDetailTab } from './resource-detail/Page';
+export type { ResourceSettings } from './resource-detail/data';
+export { default as ResourceFormPage } from './resource-form/Page';
+export { meta as resourceFormTemplateMeta } from './resource-form/template.meta';
+export type { ResourceFormProps } from './resource-form/Page';
+export type { RegionOption as ResourceRegionOption, ResourceFormValues } from './resource-form/data';
+export { default as ResourceGalleryPage } from './resource-gallery/Page';
+export { meta as resourceGalleryTemplateMeta } from './resource-gallery/template.meta';
+export type { GalleryView, ResourceGalleryProps } from './resource-gallery/Page';
+export { default as ResourceIndexPage } from './resource-index/Page';
+export { meta as resourceIndexTemplateMeta } from './resource-index/template.meta';
+export type { ResourceBulkAction, ResourceIndexProps } from './resource-index/Page';
+export type { ResourceRow } from './resource-index/data';
+export { default as SearchResultsPage } from './search-results/Page';
+export { meta as searchResultsTemplateMeta } from './search-results/template.meta';
+export type { SearchResultsProps, SearchSelection } from './search-results/Page';
+export type { SearchFacet, SearchHit, SearchResultType } from './search-results/data';
+export { default as SettingsApiKeysPage } from './settings-api-keys/Page';
+export { meta as settingsApiKeysTemplateMeta } from './settings-api-keys/template.meta';
+export type { SettingsApiKeysProps } from './settings-api-keys/Page';
+export type { ApiKey } from './settings-api-keys/data';
+export { default as SettingsAppearancePage } from './settings-appearance/Page';
+export { meta as settingsAppearanceTemplateMeta } from './settings-appearance/template.meta';
+export type { SettingsAppearanceProps } from './settings-appearance/Page';
+export type { Density, LanguageOption } from './settings-appearance/data';
+export { default as SettingsBillingPage } from './settings-billing/Page';
+export { meta as settingsBillingTemplateMeta } from './settings-billing/template.meta';
+export type { SettingsBillingProps } from './settings-billing/Page';
+export { default as SettingsIntegrationsPage } from './settings-integrations/Page';
+export { meta as settingsIntegrationsTemplateMeta } from './settings-integrations/template.meta';
+export type { SettingsIntegrationsProps } from './settings-integrations/Page';
+export type { Connector, WebhookDelivery, WebhookEndpoint } from './settings-integrations/data';
+export { default as SettingsMembersPage } from './settings-members/Page';
+export { meta as settingsMembersTemplateMeta } from './settings-members/template.meta';
+export type { SettingsMembersProps } from './settings-members/Page';
+export type { RolePermission } from './settings-members/data';
+export { default as SettingsNotificationsPage } from './settings-notifications/Page';
+export { meta as settingsNotificationsTemplateMeta } from './settings-notifications/template.meta';
+export type { SettingsNotificationsProps } from './settings-notifications/Page';
+export { default as SettingsProfilePage } from './settings-profile/Page';
+export { meta as settingsProfileTemplateMeta } from './settings-profile/template.meta';
+export type { SettingsProfileProps } from './settings-profile/Page';
+export type { ProfileDetail } from './settings-profile/ReadOnlyProfile';
+export type { ProfileFormValues, SelectOption } from './settings-profile/data';
+export { SettingsFrame, type SettingsFrameOptions, type SettingsFrameProps } from './settings-profile/SettingsFrame';
+export {
+  SETTINGS_TITLES,
+  settingsBreadcrumbs,
+  settingsNav,
+  settingsTitle,
+  type SettingsNavExtraItem,
+  type SettingsPageId,
+} from './settings-profile/settings-nav';
+export { default as SettingsSecurityPage } from './settings-security/Page';
+export { meta as settingsSecurityTemplateMeta } from './settings-security/template.meta';
+export type { PasswordChange, SettingsSecurityProps } from './settings-security/Page';
+export { default as SettingsWorkspacePage } from './settings-workspace/Page';
+export { meta as settingsWorkspaceTemplateMeta } from './settings-workspace/template.meta';
+export type { SettingsWorkspaceProps } from './settings-workspace/Page';
+export type { RegionOption, WorkspaceValues } from './settings-workspace/data';
+export { default as ShellSidebarPage } from './shell-sidebar/Page';
+export { meta as shellSidebarTemplateMeta } from './shell-sidebar/template.meta';
+export type { ShellSidebarPageProps } from './shell-sidebar/Page';
+export { default as ShellTopnavPage } from './shell-topnav/Page';
+export { meta as shellTopnavTemplateMeta } from './shell-topnav/template.meta';
+export type { ShellTopnavPageProps } from './shell-topnav/Page';
+export { default as SignInPage } from './sign-in/Page';
+export { meta as signInTemplateMeta } from './sign-in/template.meta';
+export type { SignInPageProps } from './sign-in/Page';
+export { default as SignInCardPage } from './sign-in-card/Page';
+export { meta as signInCardTemplateMeta } from './sign-in-card/template.meta';
+export type { SignInCardPageProps } from './sign-in-card/Page';
+
+export { default as PublicHubPage } from './public-hub/Page';
+export { meta as publicHubTemplateMeta } from './public-hub/template.meta';
+export type { PublicHubPageProps, PublicHubAction } from './public-hub/Page';
+export { default as SignUpPage } from './sign-up/Page';
+export { meta as signUpTemplateMeta } from './sign-up/template.meta';
+export type { SignUpPageProps } from './sign-up/Page';
+export { default as SsoLoginPage } from './sso-login/Page';
+export { meta as ssoLoginTemplateMeta } from './sso-login/template.meta';
+export type { SsoLoginPageProps } from './sso-login/Page';
+export { default as Status403Page } from './status-403/Page';
+export { meta as status403TemplateMeta } from './status-403/template.meta';
+export type { Status403Props } from './status-403/Page';
+export { default as Status404Page } from './status-404/Page';
+export { meta as status404TemplateMeta } from './status-404/template.meta';
+export type { Status404Props } from './status-404/Page';
+export { default as Status500Page } from './status-500/Page';
+export { meta as status500TemplateMeta } from './status-500/template.meta';
+export type { Status500Props } from './status-500/Page';
+export { default as StatusMaintenancePage } from './status-maintenance/Page';
+export { meta as statusMaintenanceTemplateMeta } from './status-maintenance/template.meta';
+export type { StatusMaintenanceProps } from './status-maintenance/Page';
+export { default as UpgradeRequiredPage } from './upgrade-required/Page';
+export { meta as upgradeRequiredTemplateMeta } from './upgrade-required/template.meta';
+export type { UpgradeRequiredProps } from './upgrade-required/Page';
+export { default as UsageAnalyticsPage } from './usage-analytics/Page';
+export { meta as usageAnalyticsTemplateMeta } from './usage-analytics/template.meta';
+export type { UsageAnalyticsProps, UsageExportRequest } from './usage-analytics/Page';
+export type { TrafficPoint, UsageRow } from './usage-analytics/data';
+export { default as VerifyEmailPage } from './verify-email/Page';
+export { meta as verifyEmailTemplateMeta } from './verify-email/template.meta';
+export type { VerifyEmailPageProps } from './verify-email/Page';
+export { default as PendingActivationPage } from './pending-activation/Page';
+export { meta as pendingActivationTemplateMeta } from './pending-activation/template.meta';
+export type {
+  PendingActivationPageProps,
+  PendingActivationAction,
+  PendingActivationLink,
+} from './pending-activation/Page';
+
+// P3 — AI and builders
+export { default as LiveEventStreamPage } from './live-event-stream/Page';
+export { meta as liveEventStreamTemplateMeta } from './live-event-stream/template.meta';
+export type { LiveEventStreamProps, LiveEventStreamStatus, LiveEvent } from './live-event-stream/Page';
+export { default as RunTracePage } from './run-trace/Page';
+export { meta as runTraceTemplateMeta } from './run-trace/template.meta';
+export type { RunTraceProps } from './run-trace/Page';
+export type { SpanDetail, TraceRun } from './run-trace/data';
+export { default as PromptPlaygroundPage } from './prompt-playground/Page';
+export { meta as promptPlaygroundTemplateMeta } from './prompt-playground/template.meta';
+export type { PromptPlaygroundProps } from './prompt-playground/Page';
+export type { PlaygroundModel, PlaygroundOutput } from './prompt-playground/data';
+export { default as EvaluationsPage } from './evaluations/Page';
+export { meta as evaluationsTemplateMeta } from './evaluations/template.meta';
+export type { EvaluationsProps } from './evaluations/Page';
+export { findRegressions, type EvalRegression, type EvalSample } from './evaluations/data';
+export { default as ModelProvidersPage } from './model-providers/Page';
+export { meta as modelProvidersTemplateMeta } from './model-providers/template.meta';
+export type { ModelProvidersProps } from './model-providers/Page';
+export { modelProvidersNavItem, type NewModelKeyInput, type ProviderUsageLimit } from './model-providers/data';
+export { default as CodeEditorPage } from './code-editor/Page';
+export { meta as codeEditorTemplateMeta } from './code-editor/template.meta';
+export type { CodeEditorPageProps } from './code-editor/Page';
+export { default as DataExplorerPage } from './data-explorer/Page';
+export { meta as dataExplorerTemplateMeta } from './data-explorer/template.meta';
+export type { DataExplorerProps } from './data-explorer/Page';
+export { generateExplorerRows, type ExplorerField, type ExplorerRow } from './data-explorer/data';
+
+// P3 — work, help and public pack
+export { default as ScorecardPage } from './scorecard/Page';
+export { meta as scorecardTemplateMeta } from './scorecard/template.meta';
+export type { ScorecardProps } from './scorecard/Page';
+export type { RadarPoint, ScorecardMetric } from './scorecard/data';
+export { default as IncidentConsolePage } from './incident-console/Page';
+export { meta as incidentConsoleTemplateMeta } from './incident-console/template.meta';
+export type { IncidentConsoleProps } from './incident-console/Page';
+export type { Incident, IncidentField, IncidentSeverity, IncidentStatus } from './incident-console/data';
+export { default as ResourceTreePage } from './resource-tree/Page';
+export { meta as resourceTreeTemplateMeta } from './resource-tree/template.meta';
+export type { ResourceTreeProps } from './resource-tree/Page';
+export type { ResourceGroupBy, ResourceKind, TreeResource } from './resource-tree/data';
+export { default as BoardPage } from './board/Page';
+export { meta as boardTemplateMeta } from './board/template.meta';
+export type { BoardProps } from './board/Page';
+export type { BoardCard, BoardColumn, BoardState } from './board/data';
+export { default as MessagingPage } from './messaging/Page';
+export { meta as messagingTemplateMeta } from './messaging/template.meta';
+export type { MessagingProps } from './messaging/Page';
+export type { Conversation, DirectMessage, MessageAttachment } from './messaging/data';
+export { default as HelpHomePage } from './help-home/Page';
+export { meta as helpHomeTemplateMeta } from './help-home/template.meta';
+export type { HelpHomeProps } from './help-home/Page';
+export type { HelpArticle, HelpCategory } from './help-home/data';
+export { default as DocsArticlePage } from './docs-article/Page';
+export { meta as docsArticleTemplateMeta } from './docs-article/template.meta';
+export type { DocsArticleProps } from './docs-article/Page';
+export type { ArticleLink } from './docs-article/data';
+export type { ArticleFeedbackValue } from './docs-article/ArticleFeedback';
+export { default as ChangelogPage } from './changelog/Page';
+export { meta as changelogTemplateMeta } from './changelog/template.meta';
+export type { ChangelogProps } from './changelog/Page';
+export type { ChangelogEntry, ChangelogTag } from './changelog/data';
+export { default as KeyboardShortcutsPage, KeyboardShortcutsDialog } from './keyboard-shortcuts/Page';
+export { meta as keyboardShortcutsTemplateMeta } from './keyboard-shortcuts/template.meta';
+export type { KeyboardShortcutsDialogProps, KeyboardShortcutsProps } from './keyboard-shortcuts/Page';
+export type { Shortcut, ShortcutGroup } from './keyboard-shortcuts/data';
+export { default as PricingPage } from './pricing/Page';
+export { meta as pricingTemplateMeta } from './pricing/template.meta';
+export type { PricingProps } from './pricing/Page';
+export type { ComparisonRow, ComparisonSection, ComparisonValue } from './pricing/data';
+export { default as ContactPage } from './contact/Page';
+export { meta as contactTemplateMeta } from './contact/template.meta';
+export type { ContactProps } from './contact/Page';
+export type { ContactTopic, ContactValues, Office } from './contact/data';
+
+// Incident triage board + docs article additions
+export { default as IncidentBoardPage } from './incident-board/Page';
+export { meta as incidentBoardTemplateMeta } from './incident-board/template.meta';
+export type { IncidentBoardProps } from './incident-board/Page';
+export {
+  applyVisibleMove,
+  formatAge as formatIncidentAge,
+  type TriageIncident,
+  type TriageSeverity,
+  type TriageStage,
+} from './incident-board/data';
+export type { SignatureHeader } from './docs-article/data';

package/src/keyboard-shortcuts/Page.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import KeyboardShortcutsPage, { KeyboardShortcutsDialog } from './Page';
+import { filterShortcuts, shortcutGroups } from './data';
+
+describe('KeyboardShortcutsPage', () => {
+  it('renders the console page with every group', { timeout: 15000 }, async () => {
+    render(<KeyboardShortcutsPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Keyboard shortcuts' })).toBeInTheDocument();
+    for (const g of shortcutGroups)
+      expect(screen.getByRole('heading', { level: 2, name: g.title })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('filters by description and shows an empty state', { timeout: 15000 }, async () => {
+    render(<KeyboardShortcutsPage />);
+    const search = screen.getByRole('searchbox', { name: 'Search shortcuts' });
+    await userEvent.type(search, 'save');
+    expect(screen.getByText('1 shortcut')).toBeInTheDocument();
+    const editing = screen.getByRole('region', { name: 'Editing' });
+    expect(within(editing).getByText('Save changes')).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Navigation' })).not.toBeInTheDocument();
+    await userEvent.clear(search);
+    await userEvent.type(search, 'zzz');
+    expect(screen.getByRole('heading', { name: 'No shortcuts match' })).toBeInTheDocument();
+  });
+
+  it('filterShortcuts matches an exact key', () => {
+    const groups = filterShortcuts(shortcutGroups, '?');
+    expect(groups.flatMap((g) => g.shortcuts.map((s) => s.id))).toEqual(['help']);
+  });
+});
+
+describe('KeyboardShortcutsDialog', () => {
+  it('opens from its trigger with the searchable sheet', { timeout: 15000 }, async () => {
+    render(<KeyboardShortcutsDialog />);
+    await userEvent.click(screen.getByRole('button', { name: 'Keyboard shortcuts' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Keyboard shortcuts' });
+    expect(within(dialog).getByRole('heading', { level: 3, name: 'General' })).toBeInTheDocument();
+    expect(within(dialog).getByRole('searchbox', { name: 'Search shortcuts' })).toHaveFocus();
+    await expectNoAxeViolations();
+  });
+});

package/src/keyboard-shortcuts/Page.tsx

@@ -0,0 +1,94 @@
+import { PageHeader } from '@gntik-ai/blocks';
+import { Keyboard } from '@gntik-ai/icons';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Page,
+  type BreadcrumbItem,
+} from '@gntik-ai/ui';
+import type { ReactElement } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import { shortcutBreadcrumbs, shortcutGroups, type ShortcutGroup } from './data';
+import { ShortcutSheet } from './ShortcutSheet';
+
+export interface KeyboardShortcutsProps {
+  title: string;
+  description: string;
+  groups: ShortcutGroup[];
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Keyboard shortcuts as a console page: ConsoleShell + Page with a searchable sheet. */
+export default function KeyboardShortcutsPage(props: Partial<KeyboardShortcutsProps>) {
+  const {
+    title = 'Keyboard shortcuts',
+    description = 'Move around the console without leaving the keyboard. Press ? anywhere to open this list.',
+    groups = shortcutGroups,
+    breadcrumbs = shortcutBreadcrumbs,
+    currentHref = '/help/shortcuts',
+    shell,
+  } = props;
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[]}
+          />
+        }
+      >
+        <ShortcutSheet groups={groups} />
+      </Page>
+    </ConsoleShell>
+  );
+}
+
+export interface KeyboardShortcutsDialogProps {
+  groups?: ShortcutGroup[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Trigger element (rendered through Base UI `render`); omit for a controlled dialog opened by `?`. */
+  trigger?: ReactElement | null;
+  title?: string;
+}
+
+/** The same sheet in a Dialog, for the `?` shortcut or a help menu item. */
+export function KeyboardShortcutsDialog({
+  groups = shortcutGroups,
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger = <Button variant="secondary" icon={Keyboard} />,
+  title = 'Keyboard shortcuts',
+}: KeyboardShortcutsDialogProps) {
+  return (
+    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {trigger && <DialogTrigger render={trigger}>{title}</DialogTrigger>}
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>Search by action or key.</DialogDescription>
+        </DialogHeader>
+        <DialogBody className="max-h-[70vh] overflow-y-auto">
+          <ShortcutSheet groups={groups} headingLevel={3} columns={1} autoFocus />
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/keyboard-shortcuts/ShortcutSheet.tsx

@@ -0,0 +1,80 @@
+import { Keyboard, Search } from '@gntik-ai/icons';
+import { EmptyState, Grid, Heading, Input, KbdCombo, Stack, Text } from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import { filterShortcuts, type ShortcutGroup } from './data';
+
+export interface ShortcutSheetProps {
+  groups: readonly ShortcutGroup[];
+  /** Heading level of the group titles (h2 on the page, h3 inside the dialog). */
+  headingLevel?: 2 | 3;
+  /** Columns of groups at `md` and up. */
+  columns?: 1 | 2;
+  autoFocus?: boolean;
+}
+
+/** Searchable shortcut sheet shared by the page and the dialog. */
+export function ShortcutSheet({ groups, headingLevel = 2, columns = 2, autoFocus }: ShortcutSheetProps) {
+  const [query, setQuery] = useState('');
+  const countId = useId();
+  const visible = filterShortcuts(groups, query);
+  const total = visible.reduce((n, g) => n + g.shortcuts.length, 0);
+  return (
+    <Stack gap={5}>
+      <Stack gap={2}>
+        <Input
+          type="search"
+          aria-label="Search shortcuts"
+          aria-describedby={countId}
+          placeholder="Search shortcuts…"
+          leadingIcon={Search}
+          value={query}
+          onValueChange={setQuery}
+          autoFocus={autoFocus}
+          className="max-w-md"
+        />
+        <Text id={countId} variant="caption" tone="muted" aria-live="polite">
+          {total === 1 ? '1 shortcut' : `${total} shortcuts`}
+        </Text>
+      </Stack>
+      {visible.length === 0 ? (
+        <EmptyState
+          icon={Keyboard}
+          size="sm"
+          titleAs={headingLevel === 2 ? 'h2' : 'h3'}
+          title="No shortcuts match"
+          description="Try another word, such as “save” or “go to”."
+        />
+      ) : (
+        <Grid cols={{ base: 1, md: columns }} gap={6}>
+          {visible.map((g) => (
+            <section key={g.id} aria-labelledby={`${countId}-${g.id}`}>
+              <Heading id={`${countId}-${g.id}`} level={headingLevel} size="xs" className="mb-2">
+                {g.title}
+              </Heading>
+              <ul className="divide-y divide-border rounded-lg border border-border">
+                {g.shortcuts.map((s) => (
+                  <li key={s.id} className="flex items-center justify-between gap-4 px-3.5 py-2.5">
+                    <Text as="span" variant="supporting">
+                      {s.description}
+                    </Text>
+                    <span className="flex shrink-0 items-center gap-1.5">
+                      <KbdCombo keys={s.keys} />
+                      {s.then && (
+                        <>
+                          <Text as="span" variant="caption" tone="muted">
+                            then
+                          </Text>
+                          <KbdCombo keys={s.then} />
+                        </>
+                      )}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </Grid>
+      )}
+    </Stack>
+  );
+}

package/src/keyboard-shortcuts/data.ts

@@ -0,0 +1,84 @@
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export interface Shortcut {
+  id: string;
+  /** What the shortcut does. */
+  description: string;
+  /** Keys pressed together, e.g. ['⌘', 'K']. */
+  keys: string[];
+  /** A second combination that does the same (e.g. a sequence "G then P"). */
+  then?: string[];
+}
+
+export interface ShortcutGroup {
+  id: string;
+  title: string;
+  shortcuts: Shortcut[];
+}
+
+export const shortcutBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Help', href: '/help' },
+  { label: 'Keyboard shortcuts' },
+];
+
+/** Neutral console shortcuts, grouped by area. */
+export const shortcutGroups: ShortcutGroup[] = [
+  {
+    id: 'general',
+    title: 'General',
+    shortcuts: [
+      { id: 'palette', description: 'Open the command palette', keys: ['⌘', 'K'] },
+      { id: 'help', description: 'Show keyboard shortcuts', keys: ['?'] },
+      { id: 'sidebar', description: 'Collapse or expand the sidebar', keys: ['⌘', 'B'] },
+      { id: 'theme', description: 'Switch theme', keys: ['⌘', '⇧', 'L'] },
+    ],
+  },
+  {
+    id: 'navigation',
+    title: 'Navigation',
+    shortcuts: [
+      { id: 'go-home', description: 'Go to overview', keys: ['G'], then: ['O'] },
+      { id: 'go-projects', description: 'Go to projects', keys: ['G'], then: ['P'] },
+      { id: 'go-deployments', description: 'Go to deployments', keys: ['G'], then: ['D'] },
+      { id: 'go-settings', description: 'Go to settings', keys: ['G'], then: ['S'] },
+    ],
+  },
+  {
+    id: 'lists',
+    title: 'Lists and tables',
+    shortcuts: [
+      { id: 'next', description: 'Next row', keys: ['J'] },
+      { id: 'prev', description: 'Previous row', keys: ['K'] },
+      { id: 'open', description: 'Open the selected row', keys: ['↵'] },
+      { id: 'select', description: 'Select the row', keys: ['X'] },
+      { id: 'filter', description: 'Focus the filter', keys: ['/'] },
+    ],
+  },
+  {
+    id: 'editing',
+    title: 'Editing',
+    shortcuts: [
+      { id: 'save', description: 'Save changes', keys: ['⌘', 'S'] },
+      { id: 'submit', description: 'Submit a form or comment', keys: ['⌘', '↵'] },
+      { id: 'cancel', description: 'Cancel and close', keys: ['Esc'] },
+      { id: 'undo', description: 'Undo', keys: ['⌘', 'Z'] },
+    ],
+  },
+];
+
+/** Groups with only the shortcuts whose description or keys match the query. */
+export function filterShortcuts(groups: readonly ShortcutGroup[], query: string): ShortcutGroup[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [...groups];
+  return groups
+    .map((g) => ({
+      ...g,
+      shortcuts: g.shortcuts.filter(
+        (s) =>
+          s.description.toLowerCase().includes(q) ||
+          g.title.toLowerCase().includes(q) ||
+          [...s.keys, ...(s.then ?? [])].join(' ').toLowerCase() === q,
+      ),
+    }))
+    .filter((g) => g.shortcuts.length > 0);
+}

package/src/keyboard-shortcuts/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Keyboard shortcuts',
+  family: 'Help',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Searchable shortcut sheet grouped by area (KbdCombo, “G then P” sequences), as a console page and as a Dialog variant (KeyboardShortcutsDialog) for the ? shortcut.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header'],
+};

package/src/landing/Page.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import LandingPage from './Page';
+
+describe('LandingPage', () => {
+  it('renders the navbar, the marketing sections and the footer', { timeout: 15000 }, async () => {
+    render(<LandingPage />);
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    expect(screen.getAllByRole('heading', { level: 1 })).toHaveLength(1);
+    expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Pricing' })).toHaveAttribute('href', '#pricing');
+    expect(screen.getByRole('heading', { level: 2, name: 'Simple pricing that scales with you' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('switches the billing cycle and selects a tier', { timeout: 15000 }, async () => {
+    const onSelectTier = vi.fn();
+    render(<LandingPage onSelectTier={onSelectTier} />);
+    const pricing = screen.getByRole('region', { name: 'Simple pricing that scales with you' });
+    await userEvent.click(within(pricing).getByRole('button', { name: /Annual/ }));
+    await userEvent.click(within(pricing).getByRole('button', { name: /Start free trial/ }));
+    expect(onSelectTier).toHaveBeenCalledWith(expect.objectContaining({ id: 'team' }), 'annual');
+  });
+});