@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/shared/ConsoleShell.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ComponentType } from 'react';
+import AssistantChatPage from '../assistant-chat/Page';
+import AuditLogPage from '../audit-log/Page';
+import GettingStartedPage from '../getting-started/Page';
+import NotificationInboxPage from '../notification-inbox/Page';
+import SearchResultsPage from '../search-results/Page';
+import ShellSidebarPage from '../shell-sidebar/Page';
+import UpgradeRequiredPage from '../upgrade-required/Page';
+import { ConsoleShell, type ConsoleShellProps } from './ConsoleShell';
+
+const workspaces = [
+  { id: 'ws_a', name: 'Alpha', plan: 'Pro' },
+  { id: 'ws_b', name: 'Beta', plan: 'Free' },
+];
+
+describe('ConsoleShell', () => {
+  it('shows the default usage meter and help link', () => {
+    render(<ConsoleShell>content</ConsoleShell>);
+    expect(screen.getByRole('meter')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Help & docs' })).toBeInTheDocument();
+  });
+
+  it('forwards the sidebar header, footer and layout options', { timeout: 15000 }, async () => {
+    const onSignOut = vi.fn();
+    const onWorkspaceChange = vi.fn();
+    render(
+      <ConsoleShell
+        sidebarLabel="Product sidebar"
+        workspaces={workspaces}
+        currentWorkspaceId="ws_b"
+        onWorkspaceChange={onWorkspaceChange}
+        usage={{ label: 'Agent runs', value: 40, max: 100, valueLabel: '40 / 100' }}
+        helpHref="/docs"
+        helpLabel="Documentation"
+        user={{ name: 'Ada Lovelace', email: 'ada@example.com' }}
+        userMenuItems={[{ label: 'Billing portal', onSelect: () => {} }]}
+        onSignOut={onSignOut}
+      >
+        content
+      </ConsoleShell>,
+    );
+    expect(screen.getByRole('complementary', { name: 'Product sidebar' })).toBeInTheDocument();
+    expect(screen.getByRole('meter', { name: 'Agent runs' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Documentation' })).toHaveAttribute('href', '/docs');
+    expect(screen.getAllByText('Beta').length).toBeGreaterThan(0);
+    const [trigger] = screen.getAllByRole('button', { name: /Ada Lovelace/ });
+    await userEvent.click(trigger!);
+    expect(await screen.findByRole('menuitem', { name: 'Billing portal' })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('menuitem', { name: /Sign out/ }));
+    expect(onSignOut).toHaveBeenCalled();
+  });
+
+  it('`null` hides the usage meter and the help link', () => {
+    render(
+      <ConsoleShell usage={null} helpHref={null}>
+        content
+      </ConsoleShell>,
+    );
+    expect(screen.queryByRole('meter')).toBeNull();
+    expect(screen.queryByRole('link', { name: 'Help & docs' })).toBeNull();
+  });
+
+  const pages: Array<[string, ComponentType<{ shell?: Omit<ConsoleShellProps, 'children'> }>]> = [
+    ['AssistantChatPage', AssistantChatPage],
+    ['AuditLogPage', AuditLogPage],
+    ['GettingStartedPage', GettingStartedPage],
+    ['NotificationInboxPage', NotificationInboxPage],
+    ['SearchResultsPage', SearchResultsPage],
+    ['ShellSidebarPage', ShellSidebarPage],
+    ['UpgradeRequiredPage', UpgradeRequiredPage],
+  ];
+
+  it.each(pages)('%s forwards its `shell` prop', { timeout: 15000 }, (_, Page) => {
+    render(<Page shell={{ sidebarLabel: 'Custom sidebar', usage: null, helpHref: null }} />);
+    expect(screen.getByRole('complementary', { name: 'Custom sidebar' })).toBeInTheDocument();
+    expect(screen.queryByRole('meter')).toBeNull();
+    expect(screen.queryByRole('link', { name: 'Help & docs' })).toBeNull();
+  });
+});

package/src/shared/ConsoleShell.tsx

@@ -0,0 +1,98 @@
+import {
+  AppSidebarFooter,
+  AppSidebarHeader,
+  AppSidebarNav,
+  AppTopbar,
+  type AppSidebarFooterProps,
+  type AppSidebarHeaderProps,
+  type AppTopbarProps,
+} from '@gntik-ai/blocks';
+import {
+  SidebarLayout,
+  type BreadcrumbItem,
+  type NavGroup,
+  type SidebarLayoutProps,
+  type UserMenuUser,
+  type Workspace,
+} from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+
+export interface ConsoleShellProps
+  extends
+    Pick<AppSidebarHeaderProps, 'currentWorkspaceId' | 'onWorkspaceChange' | 'onCreateWorkspace'>,
+    Pick<AppSidebarFooterProps, 'usage' | 'helpHref' | 'helpLabel' | 'userMenuItems' | 'onSignOut'>,
+    Pick<SidebarLayoutProps, 'sidebarLabel' | 'collapseMode'> {
+  /** Page content (usually a <Page>). */
+  children: ReactNode;
+  /** Sidebar navigation; defaults to the AppSidebar sample groups. */
+  nav?: NavGroup[];
+  /** Href of the current page, marks the active nav item. */
+  currentHref?: string;
+  breadcrumbs?: BreadcrumbItem[] | null;
+  workspaces?: Workspace[] | null;
+  user?: UserMenuUser | null;
+  /** Extra AppTopbar props (environment, notifications, theme control…). */
+  topbar?: Omit<AppTopbarProps, 'breadcrumbs' | 'user'>;
+  /** localStorage key for the collapsed sidebar; `undefined` disables persistence. */
+  storageKey?: string;
+}
+
+/**
+ * The console frame shared by the templates: SidebarLayout with the AppSidebar header, nav and
+ * footer, and the AppTopbar (breadcrumb, ⌘K search, notifications, theme, user menu).
+ * Templates fill it with a Page; products swap the nav, workspaces, user, usage meter, help
+ * link and user-menu items.
+ */
+export function ConsoleShell({
+  children,
+  nav,
+  currentHref,
+  breadcrumbs,
+  workspaces,
+  currentWorkspaceId,
+  onWorkspaceChange,
+  onCreateWorkspace,
+  user,
+  usage,
+  helpHref,
+  helpLabel,
+  userMenuItems,
+  onSignOut,
+  topbar,
+  storageKey,
+  sidebarLabel,
+  collapseMode,
+}: ConsoleShellProps) {
+  return (
+    <SidebarLayout
+      fullScreen
+      storageKey={storageKey}
+      sidebarLabel={sidebarLabel}
+      collapseMode={collapseMode}
+      sidebarHeader={({ collapsed }) => (
+        <AppSidebarHeader
+          collapsed={collapsed}
+          workspaces={workspaces}
+          currentWorkspaceId={currentWorkspaceId}
+          onWorkspaceChange={onWorkspaceChange}
+          onCreateWorkspace={onCreateWorkspace}
+        />
+      )}
+      sidebar={({ collapsed }) => <AppSidebarNav groups={nav} currentHref={currentHref} collapsed={collapsed} />}
+      sidebarFooter={({ collapsed }) => (
+        <AppSidebarFooter
+          collapsed={collapsed}
+          user={user}
+          usage={usage}
+          helpHref={helpHref}
+          helpLabel={helpLabel}
+          userMenuItems={userMenuItems}
+          onSignOut={onSignOut}
+        />
+      )}
+      topbar={<AppTopbar breadcrumbs={breadcrumbs} user={user} {...topbar} />}
+    >
+      {children}
+    </SidebarLayout>
+  );
+}

package/src/shell-sidebar/Page.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ShellSidebarPage from './Page';
+
+describe('ShellSidebarPage', () => {
+  it('renders the console frame with an empty page', { timeout: 15000 }, async () => {
+    const { container } = render(<ShellSidebarPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Projects' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Create your first project' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('runs the first-run action', { timeout: 15000 }, async () => {
+    const onCreate = vi.fn();
+    render(<ShellSidebarPage onCreate={onCreate} />);
+    await userEvent.click(screen.getByRole('button', { name: 'New project' }));
+    expect(onCreate).toHaveBeenCalledOnce();
+  });
+});

package/src/shell-sidebar/Page.tsx

@@ -0,0 +1,85 @@
+import { FirstRunEmpty, PageHeader } from '@gntik-ai/blocks';
+import { Page, type BreadcrumbItem, type NavGroup, type UserMenuUser, type Workspace } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  shellSidebarBreadcrumbs,
+  shellSidebarCopy,
+  shellSidebarNav,
+  shellSidebarUser,
+  shellSidebarWorkspaces,
+} from './data';
+
+export interface ShellSidebarPageProps {
+  nav: NavGroup[];
+  currentHref: string;
+  breadcrumbs: BreadcrumbItem[] | null;
+  workspaces: Workspace[] | null;
+  user: UserMenuUser | null;
+  title: ReactNode;
+  description: ReactNode;
+  emptyTitle: ReactNode;
+  emptyDescription: ReactNode;
+  emptyActionLabel: string;
+  emptySteps: string[];
+  /** Primary action of the empty state. */
+  onCreate: () => void;
+  /** Replaces the empty state with real page content. */
+  children: ReactNode;
+  /** Other ConsoleShell props (sidebar footer, workspace callbacks, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Console starter: ConsoleShell around an empty Page (title, description, first-run state). */
+export default function ShellSidebarPage({
+  nav = shellSidebarNav,
+  currentHref = shellSidebarCopy.currentHref,
+  breadcrumbs = shellSidebarBreadcrumbs,
+  workspaces = shellSidebarWorkspaces,
+  user = shellSidebarUser,
+  title = shellSidebarCopy.title,
+  description = shellSidebarCopy.description,
+  emptyTitle = shellSidebarCopy.emptyTitle,
+  emptyDescription = shellSidebarCopy.emptyDescription,
+  emptyActionLabel = shellSidebarCopy.emptyActionLabel,
+  emptySteps = shellSidebarCopy.emptySteps,
+  onCreate,
+  children,
+  shell,
+}: Partial<ShellSidebarPageProps>) {
+  return (
+    <ConsoleShell
+      nav={nav}
+      currentHref={currentHref}
+      breadcrumbs={breadcrumbs}
+      workspaces={workspaces}
+      user={user}
+      {...shell}
+    >
+      <Page
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            actions={[]}
+            tabs={null}
+          />
+        }
+      >
+        {children ?? (
+          <FirstRunEmpty
+            titleAs="h2"
+            title={emptyTitle}
+            description={emptyDescription}
+            actionLabel={emptyActionLabel}
+            onAction={onCreate}
+            steps={emptySteps}
+          />
+        )}
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/shell-sidebar/data.ts

@@ -0,0 +1,24 @@
+import { appSidebarNavGroups, appSidebarUser, appSidebarWorkspaces, firstRunSteps } from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export {
+  appSidebarNavGroups as shellSidebarNav,
+  appSidebarUser as shellSidebarUser,
+  appSidebarWorkspaces as shellSidebarWorkspaces,
+};
+
+export const shellSidebarBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Projects' },
+];
+
+export const shellSidebarCopy = {
+  currentHref: '/projects',
+  title: 'Projects',
+  description: 'Services, environments and deployments, grouped by project.',
+  emptyTitle: 'Create your first project',
+  emptyDescription:
+    'Projects group your services, environments and deployments. Start one from a repository in a couple of minutes.',
+  emptyActionLabel: 'New project',
+  emptySteps: firstRunSteps,
+};

package/src/shell-sidebar/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Sidebar shell',
+  family: 'Shells',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Console starter: app sidebar, topbar and an empty Page with a title, description and a first-run empty state.',
+  layout: 'SidebarLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'empty-states'],
+};

package/src/shell-topnav/Page.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ShellTopnavPage from './Page';
+
+describe('ShellTopnavPage', () => {
+  it('renders the navbar, page header and empty body', { timeout: 15000 }, async () => {
+    const { container } = render(<ShellTopnavPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Projects' })).toBeInTheDocument();
+    const nav = screen.getByRole('navigation', { name: 'Main' });
+    expect(within(nav).getByRole('link', { name: 'Projects' })).toHaveAttribute('aria-current', 'page');
+    await expectNoAxeViolations(container);
+  });
+
+  it('moves the current link on navigation', { timeout: 15000 }, async () => {
+    const onNavigate = vi.fn();
+    render(<ShellTopnavPage onNavigate={onNavigate} />);
+    const nav = screen.getByRole('navigation', { name: 'Main' });
+    await userEvent.click(within(nav).getByRole('link', { name: 'Deployments' }));
+    expect(within(nav).getByRole('link', { name: 'Deployments' })).toHaveAttribute('aria-current', 'page');
+    expect(within(nav).getByRole('link', { name: 'Projects' })).not.toHaveAttribute('aria-current');
+    expect(onNavigate).toHaveBeenCalledWith(expect.objectContaining({ label: 'Deployments' }));
+  });
+});

package/src/shell-topnav/Page.tsx

@@ -0,0 +1,94 @@
+import { AppTopbar, FirstRunEmpty, PageHeader } from '@gntik-ai/blocks';
+import { Logo, Stack, StackedLayout, type NavItem, type NotificationItem, type UserMenuUser } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import { shellTopnavCopy, shellTopnavLinks, shellTopnavNotifications, shellTopnavUser } from './data';
+
+export interface ShellTopnavPageProps {
+  /** Brand at the start of the navbar; defaults to the preset Logo with wordmark. */
+  brand: ReactNode;
+  links: NavItem[];
+  /** Initial current link (uncontrolled). */
+  defaultHref: string;
+  onNavigate: (item: NavItem) => void;
+  user: UserMenuUser | null;
+  notifications: NotificationItem[] | null;
+  onSignOut: () => void;
+  title: ReactNode;
+  description: ReactNode;
+  emptyTitle: ReactNode;
+  emptyDescription: ReactNode;
+  emptyActionLabel: string;
+  emptySteps: string[];
+  onCreate: () => void;
+  footer: ReactNode;
+  /** Replaces the empty state with real page content. */
+  children: ReactNode;
+}
+
+/** Top-navigation starter: StackedLayout with brand, links, AppTopbar actions, a PageHeader and an empty body. */
+export default function ShellTopnavPage({
+  brand = <Logo size={24} wordmark />,
+  links = shellTopnavLinks,
+  defaultHref = shellTopnavCopy.currentHref,
+  onNavigate,
+  user = shellTopnavUser,
+  notifications = shellTopnavNotifications,
+  onSignOut,
+  title = shellTopnavCopy.title,
+  description = shellTopnavCopy.description,
+  emptyTitle = shellTopnavCopy.emptyTitle,
+  emptyDescription = shellTopnavCopy.emptyDescription,
+  emptyActionLabel = shellTopnavCopy.emptyActionLabel,
+  emptySteps = shellTopnavCopy.emptySteps,
+  onCreate,
+  footer = shellTopnavCopy.footer,
+  children,
+}: Partial<ShellTopnavPageProps>) {
+  const [current, setCurrent] = useState(defaultHref);
+  return (
+    <StackedLayout
+      fullScreen
+      brand={brand}
+      links={links}
+      currentHref={current}
+      onNavigate={(item) => {
+        if (item.href) setCurrent(item.href);
+        onNavigate?.(item);
+      }}
+      mobileTitle="Navigation"
+      actions={
+        <AppTopbar
+          breadcrumbs={null}
+          environment={null}
+          notifications={notifications}
+          user={user}
+          onSignOut={onSignOut}
+        />
+      }
+      footer={footer}
+    >
+      {/* PageHeader renders a <header>: inside <main> it is not a second banner landmark. */}
+      <Stack gap={6}>
+        <PageHeader
+          breadcrumbs={null}
+          title={title}
+          description={description}
+          status=""
+          meta={[]}
+          actions={[]}
+          tabs={null}
+        />
+        {children ?? (
+          <FirstRunEmpty
+            titleAs="h2"
+            title={emptyTitle}
+            description={emptyDescription}
+            actionLabel={emptyActionLabel}
+            onAction={onCreate}
+            steps={emptySteps}
+          />
+        )}
+      </Stack>
+    </StackedLayout>
+  );
+}

package/src/shell-topnav/data.ts

@@ -0,0 +1,25 @@
+import { appSidebarUser, appTopbarNotifications, firstRunSteps } from '@gntik-ai/blocks';
+import { BarChart3, FolderKanban, Home, Rocket, Users } from '@gntik-ai/icons';
+import type { NavItem } from '@gntik-ai/ui';
+
+export { appSidebarUser as shellTopnavUser, appTopbarNotifications as shellTopnavNotifications };
+
+export const shellTopnavLinks: NavItem[] = [
+  { label: 'Overview', href: '#overview', icon: Home },
+  { label: 'Projects', href: '#projects', icon: FolderKanban },
+  { label: 'Deployments', href: '#deployments', icon: Rocket },
+  { label: 'Analytics', href: '#analytics', icon: BarChart3 },
+  { label: 'Members', href: '#members', icon: Users },
+];
+
+export const shellTopnavCopy = {
+  currentHref: '#projects',
+  title: 'Projects',
+  description: 'Services, environments and deployments, grouped by project.',
+  emptyTitle: 'Create your first project',
+  emptyDescription:
+    'Projects group your services, environments and deployments. Start one from a repository in a couple of minutes.',
+  emptyActionLabel: 'New project',
+  emptySteps: firstRunSteps,
+  footer: '© 2026 Acme Industries · Status · Privacy',
+};

package/src/shell-topnav/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Top-nav shell',
+  family: 'Shells',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Top-navigation starter: brand, primary links (drawer on small screens), search, notifications, theme and user menu, a page header and an empty body.',
+  layout: 'StackedLayout',
+  blocks: ['app-topbar', 'page-header', 'empty-states'],
+};

package/src/sign-in/BrandPanel.tsx

@@ -0,0 +1,34 @@
+import { Check } from '@gntik-ai/icons';
+import { Stack, Text } from '@gntik-ai/ui';
+
+export interface BrandPanelCopy {
+  eyebrow: string;
+  headline: string;
+  features: string[];
+}
+
+/** Brand panel body for AuthLayout `split`: eyebrow, headline and a short feature list (text only). */
+export function BrandPanel({ eyebrow, headline, features }: BrandPanelCopy) {
+  return (
+    <Stack gap={8}>
+      <Stack gap={4}>
+        <Text variant="caption" tone="primary" className="font-mono tracking-[0.18em] uppercase">
+          {eyebrow}
+        </Text>
+        <Text variant="display" className="text-[32px] text-balance">
+          {headline}
+        </Text>
+      </Stack>
+      <Stack as="ul" gap={3}>
+        {features.map((feature) => (
+          <Stack as="li" key={feature} direction="row" align="center" gap={3}>
+            <Check size={16} aria-hidden className="shrink-0 text-primary-text" />
+            <Text variant="supporting" tone="muted">
+              {feature}
+            </Text>
+          </Stack>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

package/src/sign-in/Page.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import SignInPage from './Page';
+
+describe('SignInPage', () => {
+  it('renders the form, SSO options and brand panel', async () => {
+    const { container } = render(<SignInPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in to your workspace' })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: 'Single sign-on' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('validates, then submits the credentials', async () => {
+    const onSubmit = vi.fn();
+    render(<SignInPage onSubmit={onSubmit} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(screen.getByText('Enter a valid email address.')).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+    await userEvent.type(screen.getByLabelText('Email'), 'dana@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'correct horse');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'dana@example.com', password: 'correct horse', remember: true });
+  });
+
+  it('starts single sign-on with the chosen provider', async () => {
+    const onSso = vi.fn();
+    render(<SignInPage onSso={onSso} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Continue with SSO' }));
+    expect(onSso).toHaveBeenCalledWith('sso');
+    expect(screen.getByRole('button', { name: 'Continue with Google' })).toBeDisabled();
+  });
+
+  it('takes the heading copy from props', () => {
+    render(<SignInPage title="Welcome back to the console" description="Sign in with your tenant account." />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Welcome back to the console' })).toBeInTheDocument();
+    expect(screen.getByText('Sign in with your tenant account.')).toBeInTheDocument();
+  });
+});

package/src/sign-in/Page.tsx

@@ -0,0 +1,73 @@
+import { SignInForm, SsoButtons, type SignInValues, type SsoProvider } from '@gntik-ai/blocks';
+import { AuthLayout } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import { BrandPanel, type BrandPanelCopy } from './BrandPanel';
+import { signInBrand, signInSsoProviders } from './data';
+
+export interface SignInPageProps {
+  /** Heading above the form (default "Sign in to your workspace"). */
+  title: ReactNode;
+  /** Line under the heading (default "Use your work email to continue."). */
+  description: ReactNode;
+  /** Small label above the heading. */
+  eyebrow: ReactNode;
+  /** Signs in. A returned promise shows the loading state; a rejection's message shows in the alert. */
+  onSubmit: (values: SignInValues) => void | Promise<void>;
+  /** Starts single sign-on with a provider id; the button spins until the page navigates away. */
+  onSso: (providerId: string) => void;
+  ssoProviders: SsoProvider[];
+  error: string | null;
+  forgotPasswordHref: string;
+  onForgotPassword: () => void;
+  signUpHref: string;
+  onSignUp: () => void;
+  /** Brand panel copy (split layout, large screens). */
+  brand: BrandPanelCopy;
+  brandFooter: ReactNode;
+  logo: ReactNode;
+}
+
+/** Split sign-in: AuthLayout brand panel + SignInForm with SsoButtons. */
+export default function SignInPage({
+  title,
+  description,
+  eyebrow,
+  onSubmit,
+  onSso,
+  ssoProviders = signInSsoProviders,
+  error,
+  forgotPasswordHref,
+  onForgotPassword,
+  signUpHref,
+  onSignUp,
+  brand = signInBrand,
+  brandFooter = signInBrand.footer,
+  logo,
+}: Partial<SignInPageProps>) {
+  const [ssoLoading, setSsoLoading] = useState<string | null>(null);
+  return (
+    <AuthLayout fullScreen variant="split" logo={logo} brand={<BrandPanel {...brand} />} brandFooter={brandFooter}>
+      <SignInForm
+        title={title}
+        description={description}
+        eyebrow={eyebrow}
+        onSubmit={onSubmit}
+        error={error}
+        forgotPasswordHref={forgotPasswordHref}
+        onForgotPassword={onForgotPassword}
+        signUpHref={signUpHref}
+        onSignUp={onSignUp}
+        sso={
+          <SsoButtons
+            providers={ssoProviders}
+            loadingId={ssoLoading}
+            onSelect={(id) => {
+              setSsoLoading(id);
+              onSso?.(id);
+            }}
+          />
+        }
+      />
+    </AuthLayout>
+  );
+}

package/src/sign-in/data.ts

@@ -0,0 +1,11 @@
+import { ssoProviders } from '@gntik-ai/blocks';
+
+export { ssoProviders as signInSsoProviders };
+
+/** Brand panel copy for the split layout. */
+export const signInBrand = {
+  eyebrow: 'Control plane',
+  headline: 'Ship with confidence, not guesswork.',
+  features: ['Every deployment reviewed and audited', 'Roles and access per project', 'Usage and spend in one place'],
+  footer: 'MFA · recovery codes · audited access',
+};

package/src/sign-in/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Sign in',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Split sign-in: brand panel with a short value pitch, email and password form, forgot-password link and single sign-on options.',
+  layout: 'AuthLayout',
+  blocks: ['sign-in-form', 'sso-buttons'],
+};