@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/pending-activation/data.ts

@@ -0,0 +1,25 @@
+/** Product-agnostic preview copy for an account awaiting activation. */
+export const pendingActivationSample = {
+  title: 'Your account is awaiting activation',
+  intro: 'Your registration is complete. You can sign in once your account has been approved.',
+  statusTitle: 'Approval pending',
+  statusMessage: 'Your account is waiting for review. No further action is needed right now.',
+  recovery: {
+    'no-access': {
+      title: 'Account access is restricted',
+      message: 'This account is not available to you yet. Return to sign in or review your registration.',
+    },
+    'not-found': {
+      title: 'Account not found',
+      message: 'We could not find this registration. Return to sign in or review your sign-up.',
+    },
+    error: {
+      title: 'Account status unavailable',
+      message: 'We could not load your account status. Try again in a moment.',
+    },
+  },
+  recoveryLinks: [
+    { label: 'Sign in', href: '/sign-in' },
+    { label: 'Review sign-up', href: '/sign-up' },
+  ],
+};

package/src/pending-activation/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Pending activation',
+  family: 'Auth',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Centred card for registered accounts awaiting approval or activation: polite status, optional request reference, allowed actions and recovery links. Use instead of verify-email when activation requires approval rather than an email verification link.',
+  layout: 'AuthLayout',
+  blocks: ['inline-callout', 'error-panel'],
+};

package/src/pricing/ComparisonTable.tsx

@@ -0,0 +1,75 @@
+import type { PricingTier } from '@gntik-ai/blocks';
+import { Check, Minus } from '@gntik-ai/icons';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@gntik-ai/ui';
+import { Fragment } from 'react';
+import type { ComparisonSection, ComparisonValue } from './data';
+
+function Value({ value }: { value: ComparisonValue | undefined }) {
+  if (value === true)
+    return (
+      <>
+        <Check size={16} aria-hidden className="inline text-primary-text" />
+        <span className="sr-only">Included</span>
+      </>
+    );
+  if (value === false || value === undefined)
+    return (
+      <>
+        <Minus size={16} aria-hidden className="inline text-muted-foreground" />
+        <span className="sr-only">Not included</span>
+      </>
+    );
+  return <span className="text-foreground">{value}</span>;
+}
+
+/** Plan comparison: one column per tier, rows grouped by section (column-group headers). */
+export function ComparisonTable({
+  tiers,
+  sections,
+  caption,
+}: {
+  tiers: readonly PricingTier[];
+  sections: readonly ComparisonSection[];
+  caption: string;
+}) {
+  return (
+    <Table containerLabel={caption}>
+      <TableCaption srOnly>{caption}</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col" className="w-[34%]">
+            Feature
+          </TableHead>
+          {tiers.map((t) => (
+            <TableHead key={t.id} scope="col" align="center">
+              {t.name}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {sections.map((s) => (
+          <Fragment key={s.title}>
+            <TableRow>
+              <TableHead scope="colgroup" colSpan={tiers.length + 1} className="bg-secondary/40 text-foreground">
+                {s.title}
+              </TableHead>
+            </TableRow>
+            {s.rows.map((r) => (
+              <TableRow key={r.feature}>
+                <TableHead scope="row" className="font-normal text-foreground">
+                  {r.feature}
+                </TableHead>
+                {tiers.map((t) => (
+                  <TableCell key={t.id} align="center">
+                    <Value value={r.values[t.id]} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </Fragment>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/pricing/Page.test.tsx

@@ -0,0 +1,29 @@
+import { samplePricingTiers } from '@gntik-ai/blocks';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import PricingPage from './Page';
+
+describe('PricingPage', () => {
+  it('renders the nav, tiers, comparison and FAQ', { timeout: 15000 }, async () => {
+    render(<PricingPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getAllByRole('navigation', { name: 'Primary' }).length).toBeGreaterThan(0);
+    expect(screen.getByRole('heading', { name: 'Simple pricing that grows with you' })).toBeInTheDocument();
+    const table = screen.getByRole('table', { name: 'Plan comparison' });
+    const head = within(table).getAllByRole('rowgroup')[0]!;
+    expect(within(head).getAllByRole('columnheader')).toHaveLength(samplePricingTiers.length + 1);
+    const sso = within(table).getByRole('rowheader', { name: 'Single sign-on' }).closest('tr');
+    expect(sso).not.toBeNull();
+    expect(within(sso as HTMLElement).getAllByText('Not included')).toHaveLength(2);
+    expect(screen.getByRole('heading', { name: /questions/i })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('selects a tier with the billing cycle', { timeout: 15000 }, async () => {
+    const onSelectTier = vi.fn();
+    render(<PricingPage onSelectTier={onSelectTier} />);
+    await userEvent.click(screen.getByRole('button', { name: /Start free trial/ }));
+    expect(onSelectTier).toHaveBeenCalledWith(expect.objectContaining({ id: 'team' }), expect.any(String));
+  });
+});

package/src/pricing/Page.tsx

@@ -0,0 +1,83 @@
+import {
+  Faq,
+  FeatureGrid,
+  PricingTable,
+  samplePricingTiers,
+  type FaqItem,
+  type Feature,
+  type PricingCycle,
+  type PricingTier,
+} from '@gntik-ai/blocks';
+import { Section, Stack, type MegaMenuItem } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { ComparisonTable } from './ComparisonTable';
+import { comparisonSections, publicCopyright, publicFooterLinks, publicMenu, type ComparisonSection } from './data';
+import { PublicFrame } from './PublicFrame';
+
+export interface PricingProps {
+  brand: ReactNode;
+  /** MegaMenu items (MobileNav below lg). */
+  menu: MegaMenuItem[];
+  currentHref: string;
+  signInHref: string;
+  getStartedHref: string;
+  title: ReactNode;
+  description: ReactNode;
+  tiers: PricingTier[];
+  defaultCycle: PricingCycle;
+  onSelectTier: (tier: PricingTier, cycle: PricingCycle) => void;
+  /** Highlights above the comparison (FeatureGrid); omitted = block samples. */
+  features: Feature[];
+  comparison: ComparisonSection[];
+  faqs: FaqItem[];
+  footerLinks: Array<{ label: string; href: string }>;
+  copyright: ReactNode;
+}
+
+/** Public pricing: StackedLayout + MegaMenu, PricingTable, FeatureGrid, plan comparison table and Faq. */
+export default function PricingPage(props: Partial<PricingProps>) {
+  const {
+    brand,
+    menu = publicMenu,
+    currentHref = '/pricing',
+    signInHref,
+    getStartedHref,
+    title = 'Simple pricing that grows with you',
+    description = 'Start free, upgrade when your team does. Every paid plan has a 14-day trial.',
+    tiers = samplePricingTiers,
+    defaultCycle,
+    onSelectTier,
+    features,
+    comparison = comparisonSections,
+    faqs,
+    footerLinks = publicFooterLinks,
+    copyright = publicCopyright,
+  } = props;
+  return (
+    <PublicFrame
+      brand={brand}
+      menu={menu}
+      currentHref={currentHref}
+      signInHref={signInHref}
+      getStartedHref={getStartedHref}
+      footerLinks={footerLinks}
+      copyright={copyright}
+    >
+      <Stack gap={12}>
+        <PricingTable
+          eyebrow="Pricing"
+          title={title}
+          description={description}
+          tiers={tiers}
+          defaultCycle={defaultCycle}
+          onSelectTier={onSelectTier}
+        />
+        <FeatureGrid eyebrow="Every plan" title="Included from day one" features={features} columns={3} />
+        <Section title="Compare plans" description="Limits and features side by side.">
+          <ComparisonTable tiers={tiers} sections={comparison} caption="Plan comparison" />
+        </Section>
+        <Faq items={faqs} layout="split" />
+      </Stack>
+    </PublicFrame>
+  );
+}

package/src/pricing/PublicFrame.tsx

@@ -0,0 +1,84 @@
+import {
+  Button,
+  Link,
+  Logo,
+  MegaMenu,
+  MobileNav,
+  StackedLayout,
+  ThemeSwitcher,
+  megaMenuNavItems,
+  type MegaMenuItem,
+} from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+
+export interface PublicFrameProps {
+  brand?: ReactNode;
+  menu: MegaMenuItem[];
+  currentHref?: string;
+  signInHref?: string;
+  getStartedHref?: string;
+  footerLinks: Array<{ label: string; href: string }>;
+  copyright: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Public-site chrome: StackedLayout with the MegaMenu as the sub-nav row on large screens and
+ * a MobileNav (fed by megaMenuNavItems) below lg.
+ */
+export function PublicFrame({
+  brand = <Logo size={26} wordmark />,
+  menu,
+  currentHref,
+  signInHref = '/sign-in',
+  getStartedHref = '/sign-up',
+  footerLinks,
+  copyright,
+  children,
+}: PublicFrameProps) {
+  return (
+    <StackedLayout
+      fullScreen
+      width="wide"
+      brand={brand}
+      actions={
+        <>
+          <ThemeSwitcher size="sm" className="hidden md:inline-flex" />
+          <Button variant="ghost" size="sm" render={<a href={signInHref} />} nativeButton={false}>
+            Sign in
+          </Button>
+          <Button size="sm" render={<a href={getStartedHref} />} nativeButton={false}>
+            Get started
+          </Button>
+          <MobileNav
+            className="lg:hidden"
+            groups={[{ items: megaMenuNavItems(menu) }]}
+            currentHref={currentHref}
+            title="Menu"
+            label="Primary"
+            side="right"
+          />
+        </>
+      }
+      subnav={<MegaMenu items={menu} currentHref={currentHref} label="Primary" className="hidden lg:block" />}
+      footer={
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <span>{copyright}</span>
+          <nav aria-label="Footer">
+            <ul className="flex flex-wrap gap-x-4 gap-y-1">
+              {footerLinks.map((l) => (
+                <li key={l.href}>
+                  <Link href={l.href} tone="muted" underline="hover">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      }
+    >
+      {children}
+    </StackedLayout>
+  );
+}

package/src/pricing/data.ts

@@ -0,0 +1,104 @@
+import { BarChart3, BookOpen, FileText, FolderKanban, LifeBuoy, Rocket, Shield } from '@gntik-ai/icons';
+import type { MegaMenuItem } from '@gntik-ai/ui';
+
+/** Public navigation: product panels plus plain links. */
+export const publicMenu: MegaMenuItem[] = [
+  {
+    label: 'Product',
+    sections: [
+      {
+        title: 'Build',
+        links: [
+          {
+            label: 'Projects',
+            href: '/product/projects',
+            icon: FolderKanban,
+            description: 'Every project, its environments and owners.',
+          },
+          {
+            label: 'Deployments',
+            href: '/product/deployments',
+            icon: Rocket,
+            description: 'Previews, rollbacks and deploy gates.',
+          },
+        ],
+      },
+      {
+        title: 'Operate',
+        links: [
+          {
+            label: 'Analytics',
+            href: '/product/analytics',
+            icon: BarChart3,
+            description: 'Usage, latency and error budgets.',
+          },
+          { label: 'Security', href: '/product/security', icon: Shield, description: 'SSO, roles and audit logs.' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Resources',
+    sections: [
+      {
+        links: [
+          { label: 'Documentation', href: '/docs', icon: BookOpen, description: 'Guides and API reference.' },
+          { label: 'Changelog', href: '/changelog', icon: FileText, description: 'What shipped this month.' },
+          { label: 'Support', href: '/contact', icon: LifeBuoy, description: 'Talk to a person.' },
+        ],
+      },
+    ],
+  },
+  { label: 'Pricing', href: '/pricing' },
+  { label: 'Contact', href: '/contact' },
+];
+
+export const publicFooterLinks = [
+  { label: 'Status', href: '/status' },
+  { label: 'Privacy', href: '/privacy' },
+  { label: 'Terms', href: '/terms' },
+];
+
+export const publicCopyright = '© Example, Inc.';
+
+/** `true` = included, `false` = not included, a string = the limit. */
+export type ComparisonValue = boolean | string;
+
+export interface ComparisonRow {
+  feature: string;
+  /** Values per tier id. */
+  values: Record<string, ComparisonValue>;
+}
+
+export interface ComparisonSection {
+  title: string;
+  rows: ComparisonRow[];
+}
+
+/** Plan comparison keyed by the sample tier ids (starter · team · enterprise). */
+export const comparisonSections: ComparisonSection[] = [
+  {
+    title: 'Usage',
+    rows: [
+      { feature: 'Projects', values: { starter: '1', team: 'Unlimited', enterprise: 'Unlimited' } },
+      { feature: 'Members', values: { starter: '3', team: '25', enterprise: 'Unlimited' } },
+      { feature: 'Requests per month', values: { starter: '50,000', team: '500,000', enterprise: 'Custom' } },
+    ],
+  },
+  {
+    title: 'Features',
+    rows: [
+      { feature: 'Preview deployments', values: { starter: false, team: true, enterprise: true } },
+      { feature: 'Saved views', values: { starter: true, team: true, enterprise: true } },
+      { feature: 'Data residency', values: { starter: false, team: false, enterprise: true } },
+    ],
+  },
+  {
+    title: 'Security and support',
+    rows: [
+      { feature: 'Single sign-on', values: { starter: false, team: false, enterprise: true } },
+      { feature: 'Audit log', values: { starter: false, team: '30 days', enterprise: '1 year' } },
+      { feature: 'Support', values: { starter: 'Community', team: 'Email', enterprise: 'Dedicated' } },
+    ],
+  },
+];

package/src/pricing/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Pricing',
+  family: 'Overview',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Public pricing page: StackedLayout with a MegaMenu (MobileNav below lg), PricingTable with the monthly / annual toggle, FeatureGrid highlights, a plan comparison table grouped by section, and Faq.',
+  layout: 'StackedLayout',
+  blocks: ['pricing-table', 'feature-grid', 'faq'],
+};

package/src/prompt-playground/Page.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { MonacoLoader } from '@gntik-ai/editor';
+import { expectNoAxeViolations } from '../test/a11y';
+import PromptPlaygroundPage from './Page';
+
+/** Minimal Monaco stand-in (same approach as the CodePanel block tests). */
+function mockMonaco() {
+  const model = () => ({
+    getValue: () => '',
+    setValue: vi.fn(),
+    onDidChangeContent: () => ({ dispose: vi.fn() }),
+    dispose: vi.fn(),
+  });
+  const editor = {
+    defineTheme: vi.fn(),
+    setTheme: vi.fn(),
+    setModelLanguage: vi.fn(),
+    remeasureFonts: vi.fn(),
+    createModel: vi.fn(() => model()),
+    create: vi.fn(),
+    createDiffEditor: vi.fn(() => ({
+      setModel: vi.fn(),
+      getModel: () => null,
+      updateOptions: vi.fn(),
+      layout: vi.fn(),
+      dispose: vi.fn(),
+    })),
+  };
+  return { editor, loader: (() => Promise.resolve({ editor })) as unknown as MonacoLoader };
+}
+
+describe('PromptPlaygroundPage', () => {
+  it('renders the playground chrome, variables, prompt and model columns', { timeout: 15000 }, async () => {
+    render(<PromptPlaygroundPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Ticket summary' })).toBeInTheDocument();
+    expect(screen.getByRole('complementary', { name: 'Variables' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Prompt' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 3, name: 'Column 1: general-large' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 3, name: 'Column 2: general-small' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('runs every column with the shared variables and diffs against the first', { timeout: 15000 }, async () => {
+    const m = mockMonaco();
+    const onGenerate = vi.fn((model: string) => ({ text: `answer from ${model}`, latencyMs: 10, outputTokens: 3 }));
+    render(<PromptPlaygroundPage onGenerate={onGenerate} loader={m.loader} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Run' }));
+    await waitFor(() => expect(onGenerate).toHaveBeenCalledTimes(2));
+    expect(onGenerate.mock.calls.map((c) => c[0])).toEqual(['general-large', 'general-small']);
+    expect(onGenerate).toHaveBeenCalledWith(
+      'general-large',
+      expect.objectContaining({ variables: expect.objectContaining({ company: 'Northwind' }) }),
+    );
+    expect(await screen.findByText('answer from general-small')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('switch', { name: 'Diff' }));
+    await waitFor(() => expect(m.editor.createDiffEditor).toHaveBeenCalledTimes(1));
+    expect(screen.getByText('Changes against general-large.')).toBeInTheDocument();
+  });
+
+  it('adds a third model column and removes it', { timeout: 15000 }, async () => {
+    render(<PromptPlaygroundPage />);
+    const outputs = screen.getByRole('region', { name: 'Outputs' });
+    await userEvent.click(within(outputs).getByRole('button', { name: 'Add model' }));
+    expect(screen.getByRole('heading', { level: 3, name: 'Column 3: reasoning-medium' })).toBeInTheDocument();
+    expect(within(outputs).getByRole('button', { name: 'Add model' })).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Remove column 3' }));
+    expect(screen.queryByRole('heading', { name: /Column 3/ })).toBeNull();
+  });
+});