create-githat-app 1.2.3 → 1.4.0

package/templates/marketplace/src/lib/anon-session.ts.hbs

@@ -0,0 +1,117 @@
+/**
+ * Anonymous shopper session helpers.
+ *
+ * The marketplace template is anonymous-first: shoppers can browse,
+ * search, fill a cart, and even check out as guests without ever
+ * touching GitHat auth. This module manages the cookie that binds
+ * that anonymous activity to a server-side cart row.
+ *
+ * GitHat is only invoked when the shopper opts in to "Save my stuff."
+ * At that point, server code can migrate the anon-cart onto the new
+ * GitHat user — see migrateAnonCart() below.
+ *
+ * The cookie is signed (HMAC-SHA-256) with COLMADO_ANON_SECRET so
+ * a malicious shopper can't steal another anon's cart by guessing
+ * the session id.
+ */
+
+import { cookies } from 'next/headers';
+import { createHmac, randomBytes, timingSafeEqual } from 'node:crypto';
+
+const COOKIE_NAME = 'anon_session';
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 30; // 30 days
+
+function secret(): string {
+  const s = process.env.COLMADO_ANON_SECRET || process.env.MARKETPLACE_ANON_SECRET;
+  if (!s) {
+    throw new Error(
+      [
+        'Missing COLMADO_ANON_SECRET (or MARKETPLACE_ANON_SECRET) env var.',
+        'Generate one with the openssl one-liner:',
+        '  openssl rand -hex 32',
+        'and add it to .env.local before running `npm run dev` again.',
+      ].join(' ')
+    );
+  }
+  return s;
+}
+
+function sign(id: string): string {
+  return createHmac('sha256', secret()).update(id).digest('hex');
+}
+
+function verify(id: string, sig: string): boolean {
+  try {
+    const expected = sign(id);
+    const a = Buffer.from(expected, 'hex');
+    const b = Buffer.from(sig, 'hex');
+    return a.length === b.length && timingSafeEqual(a, b);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Returns the current anon session id (creating one if needed).
+ * Use this in any server component / route handler that needs to
+ * read or write the anon cart.
+ */
+export async function getOrCreateAnonSession(): Promise<string> {
+  const jar = await cookies();
+  const raw = jar.get(COOKIE_NAME)?.value;
+
+  if (raw) {
+    const [id, sig] = raw.split('.');
+    if (id && sig && verify(id, sig)) {
+      return id;
+    }
+  }
+
+  // No valid cookie — issue a fresh one
+  const id = randomBytes(16).toString('hex');
+  const sig = sign(id);
+  jar.set(COOKIE_NAME, `${id}.${sig}`, {
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: COOKIE_MAX_AGE,
+    path: '/',
+  });
+  return id;
+}
+
+/**
+ * Read-only — returns the anon session id if a valid one exists,
+ * otherwise null. Use this when you don't want to mint a new cookie
+ * just to check.
+ */
+export async function readAnonSession(): Promise<string | null> {
+  const jar = await cookies();
+  const raw = jar.get(COOKIE_NAME)?.value;
+  if (!raw) return null;
+  const [id, sig] = raw.split('.');
+  if (id && sig && verify(id, sig)) return id;
+  return null;
+}
+
+/**
+ * Migrate an anonymous cart onto a freshly-created GitHat user.
+ * Call this from a `useEffect` (or server action) right after a
+ * successful sign-up: hand it the new user.id and we'll rewrite the
+ * cart row, then drop the cookie.
+ *
+ * Stub for now — wire it to your database in your own code.
+ */
+export async function migrateAnonCart(userId: string): Promise<void> {
+  const anonId = await readAnonSession();
+  if (!anonId) return;
+
+  // TODO: in your project's data layer, transfer cart rows from
+  // `cart:anon:${anonId}` to `cart:user:${userId}`. This file is
+  // deliberately backend-agnostic — the marketplace template doesn't
+  // ship a database, you bring your own.
+  void userId;
+
+  const jar = await cookies();
+  jar.delete(COOKIE_NAME);
+}

package/templates/marketplace/src/lib/categories.ts.hbs

@@ -0,0 +1,35 @@
+/**
+ * Category seed for the marketplace template.
+ *
+ * Default values are shaped for a Caribbean colmado (Dominican-flavored),
+ * which is the {{businessName}} project's first audience. Replace as
+ * needed for your region — see CULTURE.md for what's region-specific
+ * vs universal.
+ *
+ * Each category is bilingual on purpose: the Spanish term is what
+ * the shopper actually says ("recargas," "víveres") and the English
+ * gloss helps Anglophone shoppers navigate without hiding the
+ * cultural identity.
+ */
+
+export interface Category {
+  slug: string;
+  es: string;
+  en: string;
+  emoji: string;
+}
+
+export const CATEGORIES: Category[] = [
+  { slug: 'viveres',   es: 'Víveres',          en: 'Staples',         emoji: '🍚' },
+  { slug: 'frutas',    es: 'Frutas y verduras', en: 'Produce',        emoji: '🥑' },
+  { slug: 'carnes',    es: 'Carnes',            en: 'Meat',           emoji: '🥩' },
+  { slug: 'lacteos',   es: 'Lácteos y huevos',  en: 'Dairy & eggs',   emoji: '🥚' },
+  { slug: 'bebidas',   es: 'Bebidas',           en: 'Drinks',         emoji: '🍺' },
+  { slug: 'hielo',     es: 'Hielo',             en: 'Ice',            emoji: '🧊' },
+  { slug: 'pan',       es: 'Pan y galletas',    en: 'Bread & crackers', emoji: '🍞' },
+  { slug: 'recargas',  es: 'Recargas',          en: 'Phone top-ups',  emoji: '📱' },
+  { slug: 'limpieza',  es: 'Limpieza',          en: 'Cleaning',       emoji: '🧼' },
+  { slug: 'higiene',   es: 'Higiene personal',  en: 'Personal care',  emoji: '🪥' },
+  { slug: 'sazon',     es: 'Sazón',             en: 'Seasonings',     emoji: '🧂' },
+  { slug: 'fritura',   es: 'Frituras',          en: 'Hot snacks',     emoji: '🥟' },
+];

package/templates/marketplace/tsconfig.json.hbs

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs/.github/workflows/deploy.yml.hbs

@@ -0,0 +1,107 @@
+name: Deploy to EC2
+
+# Auto-deploy every push to main. Also supports manual runs from the
+# Actions tab (workflow_dispatch) so you can re-ship without a dummy commit.
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+# Only one deploy at a time. Queue rather than race if a second push
+# lands mid-deploy.
+concurrency:
+  group: deploy-ec2
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    # Skip if commit message starts with "docs:" unless it includes [deploy].
+    if: $\{{ !startsWith(github.event.head_commit.message, 'docs:') || contains(github.event.head_commit.message, '[deploy]') }}
+    timeout-minutes: 12
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Type-check
+        run: npx tsc --noEmit
+
+      - name: Compute BUILD_ID
+        id: build_id
+        run: |
+          BUILD_ID=$(git rev-parse --short HEAD || echo "${GITHUB_SHA:0:7}")
+          echo "BUILD_ID=$BUILD_ID" >> "$GITHUB_OUTPUT"
+          echo "Resolved BUILD_ID=$BUILD_ID"
+
+      - name: Build (Next.js standalone)
+        run: npm run build
+        env:
+          # NEXT_PUBLIC_* vars are baked into the client bundle at build time.
+          # The real value comes from the GITHAT_PUBLISHABLE_KEY repo secret.
+          NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY: $\{{ secrets.GITHAT_PUBLISHABLE_KEY }}
+          BUILD_ID: $\{{ steps.build_id.outputs.BUILD_ID }}
+
+      - name: Load SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "$\{{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -H "${EC2_HOST#*@}" >> ~/.ssh/known_hosts
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+
+      - name: Sync production .env
+        env:
+          PROD_ENV: $\{{ secrets.PROD_ENV }}
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          if [ -z "$PROD_ENV" ]; then
+            echo "PROD_ENV secret is empty — skipping env sync."
+            exit 0
+          fi
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+          printf '%s' "$PROD_ENV" > /tmp/prod.env
+          rsync -az -e "ssh $SSH_OPTS" /tmp/prod.env "$EC2_HOST:/opt/{{projectName}}/.env"
+          shred -u /tmp/prod.env 2>/dev/null || rm -f /tmp/prod.env
+          ssh $SSH_OPTS "$EC2_HOST" \
+            "sudo chgrp {{projectName}} /opt/{{projectName}}/.env && sudo chmod 640 /opt/{{projectName}}/.env"
+
+      - name: Deploy to EC2
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+
+          rsync -az --delete -e "ssh $SSH_OPTS" \
+              --exclude .env \
+              .next/standalone/ "$EC2_HOST:/opt/{{projectName}}/"
+
+          rsync -az -e "ssh $SSH_OPTS" \
+              .next/static/ "$EC2_HOST:/opt/{{projectName}}/.next/static/"
+
+          rsync -az -e "ssh $SSH_OPTS" \
+              public/ "$EC2_HOST:/opt/{{projectName}}/public/"
+
+          ssh $SSH_OPTS "$EC2_HOST" "
+            sudo systemctl restart {{projectName}}
+            sleep 5
+            sudo systemctl is-active --quiet {{projectName}} || { sudo journalctl -u {{projectName}} -n 30 --no-pager; exit 1; }
+            echo \"deployed build \$(cat /opt/{{projectName}}/.next/BUILD_ID)\"
+          "
+
+      - name: Smoke-test the deploy
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+          ssh $SSH_OPTS "$EC2_HOST" \
+            "curl --fail --silent --show-error --max-time 10 http://127.0.0.1:3000/api/health > /dev/null && echo OK"

package/templates/nextjs/app/(auth)/reset-password/page.tsx.hbs

@@ -0,0 +1,106 @@
+{{#if includeForgotPassword}}
+'use client';
+
+import { Suspense, useState } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+{{#if includeGithatFolder}}
+import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
+{{/if}}
+
+function ResetPasswordContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
+    e.preventDefault();
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+    setError('');
+    setLoading(true);
+    try {
+{{#if includeGithatFolder}}
+      await authApi.resetPassword(token!, password);
+{{else}}
+      const res = await fetch('{{apiUrl}}/auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) throw new Error('Reset failed');
+{{/if}}
+      router.push('/sign-in?reset=success');
+    } catch (err) {
+      setError('Failed to reset password. The link may have expired.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+        <div style=\{{ textAlign: 'center' }}>
+          <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Invalid reset link</h1>
+          <p style=\{{ color: '#a1a1aa' }}>
+            <a href="/forgot-password" style=\{{ color: '#7c3aed' }}>Request a new one</a>
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <div style=\{{ width: '100%', maxWidth: '24rem', padding: '2rem' }}>
+        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Reset password</h1>
+        <p style=\{{ color: '#a1a1aa', marginBottom: '1.5rem' }}>Enter your new password below.</p>
+        {error && <p style=\{{ color: '#ef4444', marginBottom: '1rem', fontSize: '0.875rem' }}>{error}</p>}
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="New password"
+            required
+            minLength={8}
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
+          />
+          <input
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="Confirm password"
+            required
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            style=\{{ width: '100%', padding: '0.625rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.7 : 1 }}
+          >
+            {loading ? 'Resetting...' : 'Reset password'}
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<div {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b] text-zinc-400"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b', color: '#a1a1aa' }}{{/if}}>Loading...</div>}>
+      <ResetPasswordContent />
+    </Suspense>
+  );
+}
+{{/if}}

package/templates/nextjs/app/globals.css.hbs

@@ -1,3 +1,4 @@
+@import "@githat/ui/tokens.css";
 {{#if useTailwind}}
 @import "tailwindcss";
 {{/if}}
@@ -9,9 +10,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #09090b;
-  color: #fafafa;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  background: var(--bg, #09090b);
+  color: var(--fg, #fafafa);
 }
 
 a {

package/templates/nextjs/app/layout.tsx.hbs

@@ -1,4 +1,5 @@
 import { GitHatProvider } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 import '@githat/nextjs/styles';
 import './globals.css';
 {{#if includeGithatFolder}}
@@ -25,7 +26,10 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
           afterSignOutUrl: '/',
 {{/if}}
         }}>
-          {children}
+          <header style=\{{ padding: 'var(--space-4, 1rem) var(--space-6, 1.5rem)', borderBottom: '1px solid var(--border, #e5e7eb)' }}>
+            <Wordmark name="{{businessName}}" size="md" href="/" />
+          </header>
+          <main>{children}</main>
         </GitHatProvider>
       </body>
     </html>

package/templates/nextjs/app/page.tsx.hbs

@@ -1,4 +1,5 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 
 const hasKey = !!process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY;
 
@@ -6,9 +7,7 @@ function SetupGuide() {
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-8 bg-[#09090b] text-[#fafafa] px-6"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '2rem', background: '#09090b', color: '#fafafa', padding: '0 1.5rem' }}{{/if}}>
       <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
-        <h1 {{#if useTailwind}}className="text-4xl font-bold mb-2"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem' }}{{/if}}>
-          {{businessName}}
-        </h1>
+        <Wordmark name="{{businessName}}" size="xl" />
         <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
           Get started in 3 steps
         </p>
@@ -58,9 +57,7 @@ export default function Home() {
 
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
-      <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>
-        Welcome to {{businessName}}
-      </h1>
+      <Wordmark name="{{businessName}}" size="xl" />
       <p {{#if useTailwind}}className="text-zinc-400 max-w-lg text-center"{{else}}style=\{{ color: '#a1a1aa', maxWidth: '32rem', textAlign: 'center' }}{{/if}}>
         {{description}}
       </p>

package/templates/nextjs/next.config.ts.hbs

@@ -1,5 +1,8 @@
 import type { NextConfig } from 'next';
+import { withGitHat } from '@githat/nextjs/server';
 
-const nextConfig: NextConfig = {};
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
 
-export default nextConfig;
+export default withGitHat(nextConfig);

package/templates/nextjs/proxy.ts.hbs

@@ -0,0 +1,10 @@
+import { authProxy } from '@githat/nextjs/proxy';
+
+export const proxy = authProxy({
+  publicRoutes: ['/', '/sign-in', '/sign-up'{{#if includeForgotPassword}}, '/forgot-password', '/reset-password'{{/if}}{{#if includeEmailVerification}}, '/verify-email'{{/if}}],
+  signInUrl: '/sign-in',
+});
+
+export const config = {
+  matcher: ['/((?!_next|api|.*\\..*).*)'],
+};

package/templates/plain/app/(auth)/sign-in/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignInForm } from '@githat/nextjs';
+
+export default function SignInPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignInForm signUpUrl="/sign-up" {{#if includeForgotPassword}}forgotPasswordUrl="/forgot-password"{{/if}} />
+    </main>
+  );
+}

package/templates/plain/app/(auth)/sign-up/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignUpForm } from '@githat/nextjs';
+
+export default function SignUpPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignUpForm signInUrl="/sign-in" />
+    </main>
+  );
+}

package/templates/plain/app/globals.css.hbs

@@ -0,0 +1,87 @@
+/*
+ * Tailwind v4 — required because @githat/nextjs/styles is processed
+ * through @tailwindcss/postcss. Plain doesn't ship utility classes,
+ * but the import is needed for the auth pages to render styled.
+ */
+@import "tailwindcss";
+
+/*
+ * Plain template — self-contained globals.
+ *
+ * Defines the minimum CSS variables a GitHat app uses for layout and
+ * the auth-page styling that ships with @githat/nextjs/styles.
+ * Override these in your own files when you want a real theme.
+ *
+ * Light theme by default; flip --bg/--fg for dark.
+ */
+
+:root {
+  /* Surface */
+  --bg:           #ffffff;
+  --surface:      #fafafa;
+  --surface-sub:  #f4f4f5;
+
+  /* Borders */
+  --border:       #e5e7eb;
+
+  /* Foreground */
+  --fg:           #0a0a0a;
+  --fg-muted:     #525252;
+  --fg-subtle:    #737373;
+
+  /* Brand — change these two to re-skin the whole auth flow */
+  --primary:      #6366f1;
+  --accent:       #f59e0b;
+
+  /* Semantic */
+  --success:      #16a34a;
+  --warn:         #d97706;
+  --danger:       #dc2626;
+
+  /* Spacing — used by @githat/nextjs/styles */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  /* Radius */
+  --radius:    0.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  /* Fonts */
+  --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-wordmark: 'Instrument Serif', Georgia, serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:           #0a0a0a;
+    --surface:      #18181b;
+    --surface-sub:  #27272a;
+    --border:       #3f3f46;
+    --fg:           #fafafa;
+    --fg-muted:     #a1a1aa;
+    --fg-subtle:    #71717a;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/plain/app/layout.tsx.hbs

@@ -0,0 +1,41 @@
+import { GitHatProvider } from '@githat/nextjs';
+import '@githat/nextjs/styles';
+import './globals.css';
+
+export const metadata = {
+  title: '{{businessName}}',
+  description: '{{description}}',
+};
+
+export default function RootLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  return (
+    <html lang="en">
+      <body>
+        {/*
+          Plain template: no @githat/ui dep, no Wordmark. The
+          full-kit (`nextjs`) template uses @githat/ui for the
+          shared design system; the plain scaffold is the smallest
+          working app, so we avoid extra deps.
+        */}
+        <GitHatProvider config=\{{
+          publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          signInUrl: '/sign-in',
+          signUpUrl: '/sign-up',
+          afterSignInUrl: '/',
+          afterSignOutUrl: '/',
+        }}>
+          <header style=\{{
+            padding: '1rem 1.5rem',
+            borderBottom: '1px solid var(--border, #e5e7eb)',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+          }}>
+            <a href="/" style=\{{ textDecoration: 'none', color: 'inherit', fontWeight: 600 }}>
+              {{businessName}}
+            </a>
+          </header>
+          <main>{children}</main>
+        </GitHatProvider>
+      </body>
+    </html>
+  );
+}