create-githat-app 1.8.0 → 1.8.2

package/dist/cli.js

@@ -770,6 +770,7 @@ var NEXT_LIKE2 = /* @__PURE__ */ new Set([
   "classroom"
 ]);
 var MINIMAL = /* @__PURE__ */ new Set([
+  "nextjs",
   "plain",
   "saas",
   "marketplace",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-githat-app",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {

package/templates/agent/app/dashboard/page.tsx.hbs

@@ -4,7 +4,7 @@
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@githat/nextjs';
-import { githatApi } from '../../../githat/api/client{{#unless typescript}}.js{{/unless}}';
+import { githatApi } from '../../githat/api/client{{#unless typescript}}.js{{/unless}}';
 {{#if typescript}}
 interface AgentSummary {
   total: number;

package/templates/base/README.md.hbs

@@ -22,7 +22,7 @@ cp .env.local.example .env.local
 {{#ifEquals packageManager "npm"}}npm run dev{{else}}{{packageManager}} dev{{/ifEquals}}
 ```
 
-4. Open [http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}}](http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}})
+4. Open [http://localhost:{{#ifNext framework}}3000{{else}}5173{{/ifNext}}](http://localhost:{{#ifNext framework}}3000{{else}}5173{{/ifNext}})
 
 Your `NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY` is required — get it at [githat.io/dashboard/apps](https://githat.io/dashboard/apps) or re-run `create-githat-app` after running `githat login` to have it auto-registered.
 
@@ -66,8 +66,43 @@ After that, every `git push origin main` triggers a build + rsync + restart. The
 {{/if}}{{#if includeOrgManagement}}- `/dashboard/members` — Invite members, manage roles
 {{/if}}
 
+## Branded auth emails (recommended)
+
+Out of the box, password-reset and verification emails are sent from
+`auth@githat.io` with the **From name** set to your app's brand
+("{{businessName}}"). Most email clients show the brand prominently and
+hide the address — but for the most polished experience, verify your
+own domain so emails come from `auth@{{domain}}` instead:
+
+```bash
+# 1. Register your domain in SES via the GitHat API
+curl -X POST https://api.githat.io/apps/$APP_ID/email/domains \
+  -H "Authorization: Bearer $ACCESS_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"hostname": "{{domain}}"}'
+```
+
+The response includes 3 DKIM CNAMEs. Add them to your DNS registrar
+(Route 53, Cloudflare, Namecheap, etc.). SES auto-verifies within
+~5 minutes, after which every auth email ships from `auth@{{domain}}`
+with your brand throughout — subject, body, and reset link.
+
+You can also verify domains via the SDK's `useEmailDomains()` hook:
+
+```{{#if typescript}}tsx{{else}}jsx{{/if}}
+import { useEmailDomains } from '@githat/nextjs';
+
+const { add, list, status } = useEmailDomains();
+await add('{{domain}}');           // returns { dkimRecords }
+const domains = await list();      // includes verificationStatus
+```
+
+Once verified, links in emails point to `https://{{domain}}/reset-password?token=…`
+— users never see githat.io.
+
 ## Learn More
 
 - [GitHat Documentation](https://githat.io/docs)
+- [Branded Auth Emails Guide](https://githat.io/docs/email-domains)
 - [SDK Reference](https://www.npmjs.com/package/@githat/nextjs)
 - [API Reference](https://githat.io/docs/api)

package/templates/base/githat/auth/guard.tsx.hbs

@@ -2,11 +2,11 @@
 'use client';
 
 import { useAuth } from '@githat/nextjs';
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
 import { useRouter } from 'next/navigation';
 {{else}}
 import { useNavigate } from 'react-router-dom';
-{{/ifEquals}}
+{{/ifNext}}
 import { githatConfig } from '../config{{#unless typescript}}.js{{/unless}}';
 
 export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
@@ -14,11 +14,11 @@ export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
   requiredRole?: 'owner' | 'admin' | 'member';
 }{{/if}}) {
   const { isSignedIn, isLoading, org } = useAuth();
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
   const router = useRouter();
 {{else}}
   const navigate = useNavigate();
-{{/ifEquals}}
+{{/ifNext}}
 
   if (isLoading) {
     return (
@@ -29,11 +29,11 @@ export function AuthGuard({ children, requiredRole }{{#if typescript}}: {
   }
 
   if (!isSignedIn) {
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
     router.push(githatConfig.signInUrl);
 {{else}}
     navigate(githatConfig.signInUrl);
-{{/ifEquals}}
+{{/ifNext}}
     return null;
   }
 

package/templates/base/githat/dashboard/layout.tsx.hbs

@@ -4,12 +4,12 @@
 import { UserButton, OrgSwitcher } from '@githat/nextjs';
 import { AuthGuard } from '../auth/guard{{#unless typescript}}.jsx{{/unless}}';
 import { githatConfig } from '../config{{#unless typescript}}.js{{/unless}}';
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 {{else}}
 import { Link, useLocation } from 'react-router-dom';
-{{/ifEquals}}
+{{/ifNext}}
 
 const navItems = [
   { label: 'Overview', href: '/dashboard' },
@@ -27,11 +27,11 @@ const navItems = [
 ];
 
 export function DashboardLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
   const pathname = usePathname();
 {{else}}
   const { pathname } = useLocation();
-{{/ifEquals}}
+{{/ifNext}}
 
   return (
     <AuthGuard>
@@ -45,11 +45,11 @@ export function DashboardLayout({ children }{{#if typescript}}: { children: Reac
             {navItems.map((item) => (
               <Link
                 key={item.href}
-{{#ifEquals framework "nextjs"}}
+{{#ifNext framework}}
                 href={item.href}
 {{else}}
                 to={item.href}
-{{/ifEquals}}
+{{/ifNext}}
                 style=\{{
                   padding: '0.5rem 0.75rem',
                   borderRadius: '0.375rem',

package/templates/classroom/app/projects/[id]/feedback/feedback-content.tsx.hbs

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+{{#if typescript}}
+interface FeedbackContentProps {
+  id: string;
+}
+{{/if}}
+
+export default function FeedbackContent({ id }{{#if typescript}}: FeedbackContentProps{{/if}}) {
+  const [submitted, setSubmitted] = useState(false);
+  const [oneThing, setOneThing] = useState('');
+  const [stuck, setStuck] = useState('');
+  const [scale, setScale] = useState(7);
+
+  if (submitted) {
+    return (
+      <div style=\{{
+        background: 'var(--bg)',
+        color: 'var(--fg)',
+        minHeight: 'calc(100vh - 64px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 'var(--space-4)',
+      }}>
+        <div style=\{{ maxWidth: '32rem', textAlign: 'center' }}>
+          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
+            ¡Gracias!
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+            The presenter sees your feedback live on their screen.
+            You can submit again with a new thought any time.
+          </p>
+          <button
+            onClick={() => { setSubmitted(false); setOneThing(''); setStuck(''); setScale(7); }}
+            style=\{{
+              padding: 'var(--space-3) var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              border: 'none',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Add another thought
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-8) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '32rem', margin: '0 auto' }}>
+        <Link href={`/projects/${id}`} style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+          ← Project
+        </Link>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-2)' }}>
+          Tell them what you think
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+          No account, no email. Just three quick questions while
+          they're presenting.
+        </p>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            /* TODO: POST /api/projects/[id]/feedback { oneThing, stuck, scale } */
+            setSubmitted(true);
+          }}
+          style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
+        >
+          <Field label="One thing that landed for you">
+            <input
+              type="text"
+              required
+              value={oneThing}
+              onChange={(e) => setOneThing(e.target.value)}
+              placeholder="The thing you'll remember tomorrow"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+              }}
+            />
+          </Field>
+
+          <Field label="One thing you'd want them to dig into more">
+            <textarea
+              value={stuck}
+              onChange={(e) => setStuck(e.target.value)}
+              rows={3}
+              placeholder="A question, a doubt, a what-if"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+                fontFamily: 'inherit',
+                resize: 'vertical',
+              }}
+            />
+          </Field>
+
+          <Field label={`How likely are you to share this with someone? (${scale}/10)`}>
+            <input
+              type="range"
+              min={1}
+              max={10}
+              value={scale}
+              onChange={(e) => setScale(Number(e.target.value))}
+              style=\{{ width: '100%' }}
+            />
+          </Field>
+
+          <button type="submit" style=\{{
+            padding: 'var(--space-3) var(--space-5)',
+            borderRadius: 'var(--radius-md, 0.5rem)',
+            background: 'var(--primary)',
+            color: 'var(--bg)',
+            border: 'none',
+            fontWeight: 600,
+            fontSize: '1rem',
+            cursor: 'pointer',
+          }}>
+            Send feedback
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, children }{{#if typescript}}: { label: string; children: React.ReactNode }{{/if}}) {
+  return (
+    <label style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+      <span style=\{{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</span>
+      {children}
+    </label>
+  );
+}

package/templates/classroom/app/projects/[id]/feedback/page.tsx.hbs

@@ -1,159 +1,20 @@
-'use client';
-
-import { use, useState } from 'react';
-import Link from 'next/link';
+import FeedbackContent from './feedback-content{{#unless typescript}}.jsx{{/unless}}';
 
 /**
  * Audience feedback form — `/projects/[id]/feedback`.
  *
- * Anyone with the link can fill this out. NO sign-in required —
- * that's the whole point. Anonymous responses go to a queue the
- * presenter watches in real time on /present.
- *
- * The form questions are deliberately short — long forms kill
- * response rates and the value of this template is volume of
- * feedback over time, not depth per response.
+ * generateStaticParams tells Next.js which ids to pre-render at build
+ * time (required for `output: "export"`). FeedbackContent is a client
+ * component that renders the form with React state.
  */
-export default function FeedbackPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = use(params);
-  const [submitted, setSubmitted] = useState(false);
-  const [oneThing, setOneThing] = useState('');
-  const [stuck, setStuck] = useState('');
-  const [scale, setScale] = useState(7);
-
-  if (submitted) {
-    return (
-      <div style=\{{
-        background: 'var(--bg)',
-        color: 'var(--fg)',
-        minHeight: 'calc(100vh - 64px)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 'var(--space-4)',
-      }}>
-        <div style=\{{ maxWidth: '32rem', textAlign: 'center' }}>
-          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
-            ¡Gracias!
-          </h1>
-          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
-            The presenter sees your feedback live on their screen.
-            You can submit again with a new thought any time.
-          </p>
-          <button
-            onClick={() => { setSubmitted(false); setOneThing(''); setStuck(''); setScale(7); }}
-            style=\{{
-              padding: 'var(--space-3) var(--space-5)',
-              borderRadius: 'var(--radius-md, 0.5rem)',
-              background: 'var(--primary)',
-              color: 'var(--bg)',
-              border: 'none',
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-          >
-            Add another thought
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-8) var(--space-4)' }}>
-      <div style=\{{ maxWidth: '32rem', margin: '0 auto' }}>
-        <Link href={`/projects/${id}`} style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
-          ← Project
-        </Link>
-        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-2)' }}>
-          Tell them what you think
-        </h1>
-        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
-          No account, no email. Just three quick questions while
-          they're presenting.
-        </p>
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            /* TODO: POST /api/projects/[id]/feedback { oneThing, stuck, scale } */
-            setSubmitted(true);
-          }}
-          style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
-        >
-          <Field label="One thing that landed for you">
-            <input
-              type="text"
-              required
-              value={oneThing}
-              onChange={(e) => setOneThing(e.target.value)}
-              placeholder="The thing you'll remember tomorrow"
-              style=\{{
-                width: '100%',
-                padding: 'var(--space-3)',
-                borderRadius: 'var(--radius-md, 0.5rem)',
-                border: '1px solid var(--border)',
-                background: 'var(--surface)',
-                color: 'var(--fg)',
-                fontSize: '1rem',
-              }}
-            />
-          </Field>
-
-          <Field label="One thing you'd want them to dig into more">
-            <textarea
-              value={stuck}
-              onChange={(e) => setStuck(e.target.value)}
-              rows={3}
-              placeholder="A question, a doubt, a what-if"
-              style=\{{
-                width: '100%',
-                padding: 'var(--space-3)',
-                borderRadius: 'var(--radius-md, 0.5rem)',
-                border: '1px solid var(--border)',
-                background: 'var(--surface)',
-                color: 'var(--fg)',
-                fontSize: '1rem',
-                fontFamily: 'inherit',
-                resize: 'vertical',
-              }}
-            />
-          </Field>
 
-          <Field label={`How likely are you to share this with someone? (${scale}/10)`}>
-            <input
-              type="range"
-              min={1}
-              max={10}
-              value={scale}
-              onChange={(e) => setScale(Number(e.target.value))}
-              style=\{{ width: '100%' }}
-            />
-          </Field>
+const SAMPLE_PROJECT_IDS = ['sustainable-bodega', 'after-school-tutor', 'community-fridge'];
 
-          <button type="submit" style=\{{
-            padding: 'var(--space-3) var(--space-5)',
-            borderRadius: 'var(--radius-md, 0.5rem)',
-            background: 'var(--primary)',
-            color: 'var(--bg)',
-            border: 'none',
-            fontWeight: 600,
-            fontSize: '1rem',
-            cursor: 'pointer',
-          }}>
-            Send feedback
-          </button>
-        </form>
-      </div>
-    </div>
-  );
+export function generateStaticParams() {
+  return SAMPLE_PROJECT_IDS.map((id) => ({ id }));
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
-      <span style=\{{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</span>
-      {children}
-    </label>
-  );
+export default async function FeedbackPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <FeedbackContent id={id} />;
 }

package/templates/classroom/app/projects/[id]/present/page.tsx.hbs

@@ -1,113 +1,20 @@
-'use client';
-
-import { use, useEffect, useState } from 'react';
+import PresenterContent from './presenter-content{{#unless typescript}}.jsx{{/unless}}';
 
 /**
  * Presenter view — `/projects/[id]/present`.
  *
- * The student opens this on their second screen (or a phone next
- * to the laptop) and presents. As the audience submits feedback
- * via /projects/[id]/feedback, responses fade in here in real
- * time — newest first, color-coded by the scale rating.
- *
- * Real implementations:
- *  - Replace the mock interval with a polling fetch (every 3-5s)
- *    against your backend, OR a websocket / SSE stream.
- *  - Persist responses to your DB so the project can reiterate
- *    over multiple cohorts.
+ * generateStaticParams tells Next.js which ids to pre-render at build
+ * time (required for `output: "export"`). PresenterContent is a client
+ * component that renders the live feedback view with polling.
  */
 
-interface FeedbackEntry {
-  id: string;
-  oneThing: string;
-  stuck: string;
-  scale: number;
-  receivedAt: number;
-}
-
-const MOCK_FEEDBACK: FeedbackEntry[] = [
-  { id: 'a', oneThing: 'The slide on supply chain bottlenecks', stuck: 'How do you measure trust at scale?', scale: 9, receivedAt: Date.now() - 60_000 },
-  { id: 'b', oneThing: 'Loved the bilingual UX argument',       stuck: 'What about Mexican misceláneas?',     scale: 8, receivedAt: Date.now() - 120_000 },
-];
-
-export default function PresenterPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = use(params);
-  const [feedback, setFeedback] = useState<FeedbackEntry[]>(MOCK_FEEDBACK);
+const SAMPLE_PROJECT_IDS = ['sustainable-bodega', 'after-school-tutor', 'community-fridge'];
 
-  // Simulated incoming feedback. Replace with a real fetch poll or
-  // websocket subscription. The shape is the same.
-  useEffect(() => {
-    const t = setInterval(() => {
-      // setFeedback((prev) => [{ ...newOne, id: crypto.randomUUID() }, ...prev]);
-    }, 5000);
-    return () => clearInterval(t);
-  }, []);
-
-  const audienceUrl = typeof window !== 'undefined'
-    ? `${window.location.origin}/projects/${id}/feedback`
-    : `/projects/${id}/feedback`;
-
-  return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: '100vh', padding: 'var(--space-6) var(--space-4)' }}>
-      <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
-        <header style=\{{
-          padding: 'var(--space-5)',
-          borderRadius: 'var(--radius-md, 0.5rem)',
-          background: 'var(--surface-sub)',
-          marginBottom: 'var(--space-6)',
-          textAlign: 'center',
-        }}>
-          <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-2)' }}>
-            Audience submits feedback at:
-          </p>
-          <code style=\{{
-            fontSize: '1.25rem',
-            fontFamily: 'var(--font-mono, monospace)',
-            color: 'var(--primary)',
-            wordBreak: 'break-all',
-          }}>
-            {audienceUrl}
-          </code>
-        </header>
-
-        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-4)' }}>
-          Live feedback ({feedback.length})
-        </h1>
+export function generateStaticParams() {
+  return SAMPLE_PROJECT_IDS.map((id) => ({ id }));
+}
 
-        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
-          {feedback.map((f) => (
-            <li key={f.id} style=\{{
-              padding: 'var(--space-5)',
-              borderRadius: 'var(--radius-md, 0.5rem)',
-              border: `2px solid ${f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)'}`,
-              background: 'var(--surface)',
-            }}>
-              <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--space-3)', marginBottom: 'var(--space-2)' }}>
-                <div style=\{{ flex: 1 }}>
-                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>What landed</div>
-                  <div style=\{{ fontWeight: 600 }}>{f.oneThing}</div>
-                </div>
-                <div style=\{{
-                  padding: 'var(--space-1) var(--space-3)',
-                  borderRadius: 'var(--radius-full, 9999px)',
-                  background: f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)',
-                  color: 'var(--bg)',
-                  fontSize: '0.75rem',
-                  fontWeight: 700,
-                }}>
-                  {f.scale}/10
-                </div>
-              </div>
-              {f.stuck && (
-                <div style=\{{ marginTop: 'var(--space-3)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border)' }}>
-                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>Wants more on</div>
-                  <div style=\{{ fontSize: '0.9375rem', color: 'var(--fg)' }}>{f.stuck}</div>
-                </div>
-              )}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
+export default async function PresentPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <PresenterContent id={id} />;
 }

package/templates/classroom/app/projects/[id]/present/presenter-content.tsx.hbs

@@ -0,0 +1,118 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+{{#if typescript}}
+interface FeedbackEntry {
+  id: string;
+  oneThing: string;
+  stuck: string;
+  scale: number;
+  receivedAt: number;
+}
+
+interface PresenterContentProps {
+  id: string;
+}
+{{/if}}
+
+/**
+ * Presenter view — `/projects/[id]/present`.
+ *
+ * The student opens this on their second screen (or a phone next
+ * to the laptop) and presents. As the audience submits feedback
+ * via /projects/[id]/feedback, responses fade in here in real
+ * time — newest first, color-coded by the scale rating.
+ *
+ * Real implementations:
+ *  - Replace the mock interval with a polling fetch (every 3-5s)
+ *    against your backend, OR a websocket / SSE stream.
+ *  - Persist responses to your DB so the project can reiterate
+ *    over multiple cohorts.
+ */
+
+const MOCK_FEEDBACK{{#if typescript}}: FeedbackEntry[]{{/if}} = [
+  { id: 'a', oneThing: 'The slide on supply chain bottlenecks', stuck: 'How do you measure trust at scale?', scale: 9, receivedAt: Date.now() - 60_000 },
+  { id: 'b', oneThing: 'Loved the bilingual UX argument',       stuck: 'What about Mexican misceláneas?',     scale: 8, receivedAt: Date.now() - 120_000 },
+];
+
+export default function PresenterContent({ id }{{#if typescript}}: PresenterContentProps{{/if}}) {
+  const [feedback, setFeedback] = useState{{#if typescript}}<FeedbackEntry[]>{{/if}}(MOCK_FEEDBACK);
+
+  // Simulated incoming feedback. Replace with a real fetch poll or
+  // websocket subscription. The shape is the same.
+  useEffect(() => {
+    const t = setInterval(() => {
+      // setFeedback((prev) => [{ ...newOne, id: crypto.randomUUID() }, ...prev]);
+    }, 5000);
+    return () => clearInterval(t);
+  }, []);
+
+  const audienceUrl = typeof window !== 'undefined'
+    ? `${window.location.origin}/projects/${id}/feedback`
+    : `/projects/${id}/feedback`;
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: '100vh', padding: 'var(--space-6) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
+        <header style=\{{
+          padding: 'var(--space-5)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          background: 'var(--surface-sub)',
+          marginBottom: 'var(--space-6)',
+          textAlign: 'center',
+        }}>
+          <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-2)' }}>
+            Audience submits feedback at:
+          </p>
+          <code style=\{{
+            fontSize: '1.25rem',
+            fontFamily: 'var(--font-mono, monospace)',
+            color: 'var(--primary)',
+            wordBreak: 'break-all',
+          }}>
+            {audienceUrl}
+          </code>
+        </header>
+
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-4)' }}>
+          Live feedback ({feedback.length})
+        </h1>
+
+        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          {feedback.map((f) => (
+            <li key={f.id} style=\{{
+              padding: 'var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: `2px solid ${f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)'}`,
+              background: 'var(--surface)',
+            }}>
+              <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--space-3)', marginBottom: 'var(--space-2)' }}>
+                <div style=\{{ flex: 1 }}>
+                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>What landed</div>
+                  <div style=\{{ fontWeight: 600 }}>{f.oneThing}</div>
+                </div>
+                <div style=\{{
+                  padding: 'var(--space-1) var(--space-3)',
+                  borderRadius: 'var(--radius-full, 9999px)',
+                  background: f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)',
+                  color: 'var(--bg)',
+                  fontSize: '0.75rem',
+                  fontWeight: 700,
+                }}>
+                  {f.scale}/10
+                </div>
+              </div>
+              {f.stuck && (
+                <div style=\{{ marginTop: 'var(--space-3)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border)' }}>
+                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>Wants more on</div>
+                  <div style=\{{ fontSize: '0.9375rem', color: 'var(--fg)' }}>{f.stuck}</div>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/content/app/posts/[slug]/page.tsx.hbs

@@ -1,19 +1,11 @@
-'use client';
-
-import { use } from 'react';
-import Link from 'next/link';
-import { useAuth } from '@githat/nextjs';
+import PostContent from './post-content{{#unless typescript}}.jsx{{/unless}}';
 
 /**
  * Post viewer with paywall.
  *
- * Three states a reader can be in:
- *  1. Post is free → show full content
- *  2. Post is gated + reader is signed in + has active subscription → show full
- *  3. Post is gated + reader is anonymous OR not subscribed → show preview + CTA
- *
- * Subscription check is stubbed (`hasActiveSubscription` always
- * false). Wire to your backend that watches Sebastn webhooks.
+ * generateStaticParams tells Next.js which slugs to pre-render at
+ * build time (required for `output: "export"`). PostContent is a
+ * client component that handles the auth-gated paywall at runtime.
  */
 
 const SAMPLE_POSTS: Record<string, { title: string; gated: boolean; body: string }> = {
@@ -40,80 +32,12 @@ const SAMPLE_POSTS: Record<string, { title: string; gated: boolean; body: string
   },
 };
 
-export default function PostPage({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params);
-  const post = SAMPLE_POSTS[slug];
-  const { isSignedIn } = useAuth();
-
-  // Stub: real apps fetch the user's subscription state from your
-  // backend (which watches Sebastn webhooks for the source of truth).
-  const hasActiveSubscription = false;
-
-  if (!post) {
-    return (
-      <div style=\{{ padding: 'var(--space-12)', textAlign: 'center' }}>
-        <p>Post not found.</p>
-        <Link href="/" style=\{{ color: 'var(--primary)' }}>← Home</Link>
-      </div>
-    );
-  }
-
-  const showPaywall = post.gated && (!isSignedIn || !hasActiveSubscription);
-
-  return (
-    <article style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
-      <Link href="/" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
-        ← All posts
-      </Link>
-      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.25rem', lineHeight: 1.2, marginBottom: 'var(--space-4)' }}>
-        {post.title}
-      </h1>
-
-      <div style=\{{ color: 'var(--fg)', lineHeight: 1.8, fontSize: '1.0625rem' }}>
-        {showPaywall ? (
-          <>
-            <p style=\{{ marginBottom: 'var(--space-4)' }}>{post.body.slice(0, 200)}…</p>
-            <Paywall />
-          </>
-        ) : (
-          <p>{post.body}</p>
-        )}
-      </div>
-    </article>
-  );
+export function generateStaticParams() {
+  return Object.keys(SAMPLE_POSTS).map((slug) => ({ slug }));
 }
 
-function Paywall() {
-  return (
-    <div style=\{{
-      marginTop: 'var(--space-8)',
-      padding: 'var(--space-6)',
-      borderRadius: 'var(--radius-md, 0.5rem)',
-      border: '2px solid var(--accent)',
-      background: 'var(--surface-sub)',
-      textAlign: 'center',
-    }}>
-      <h3 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-2)' }}>
-        This post is for subscribers
-      </h3>
-      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
-        Get access to every paid essay, plus the newsletter.
-      </p>
-      <button
-        onClick={() => { /* TODO: open Sebastn checkout */ }}
-        style=\{{
-          padding: 'var(--space-3) var(--space-6)',
-          borderRadius: 'var(--radius-md, 0.5rem)',
-          border: 'none',
-          background: 'var(--primary)',
-          color: 'var(--bg)',
-          fontWeight: 600,
-          fontSize: '1rem',
-          cursor: 'pointer',
-        }}
-      >
-        Subscribe — $5/mo
-      </button>
-    </div>
-  );
+export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = SAMPLE_POSTS[slug] ?? null;
+  return <PostContent slug={slug} post={post} />;
 }

package/templates/content/app/posts/[slug]/post-content.tsx.hbs

@@ -0,0 +1,93 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+{{#if typescript}}
+interface Post {
+  title: string;
+  gated: boolean;
+  body: string;
+}
+
+interface PostContentProps {
+  slug: string;
+  post: Post | null;
+}
+{{/if}}
+
+export default function PostContent({ slug, post }{{#if typescript}}: PostContentProps{{/if}}) {
+  const { isSignedIn } = useAuth();
+
+  // Stub: real apps fetch the user's subscription state from your
+  // backend (which watches Sebastn webhooks for the source of truth).
+  const hasActiveSubscription = false;
+
+  if (!post) {
+    return (
+      <div style=\{{ padding: 'var(--space-12)', textAlign: 'center' }}>
+        <p>Post not found.</p>
+        <Link href="/" style=\{{ color: 'var(--primary)' }}>← Home</Link>
+      </div>
+    );
+  }
+
+  const showPaywall = post.gated && (!isSignedIn || !hasActiveSubscription);
+
+  return (
+    <article style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+      <Link href="/" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+        ← All posts
+      </Link>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.25rem', lineHeight: 1.2, marginBottom: 'var(--space-4)' }}>
+        {post.title}
+      </h1>
+
+      <div style=\{{ color: 'var(--fg)', lineHeight: 1.8, fontSize: '1.0625rem' }}>
+        {showPaywall ? (
+          <>
+            <p style=\{{ marginBottom: 'var(--space-4)' }}>{post.body.slice(0, 200)}…</p>
+            <Paywall />
+          </>
+        ) : (
+          <p>{post.body}</p>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function Paywall() {
+  return (
+    <div style=\{{
+      marginTop: 'var(--space-8)',
+      padding: 'var(--space-6)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      border: '2px solid var(--accent)',
+      background: 'var(--surface-sub)',
+      textAlign: 'center',
+    }}>
+      <h3 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-2)' }}>
+        This post is for subscribers
+      </h3>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+        Get access to every paid essay, plus the newsletter.
+      </p>
+      <button
+        onClick={() => { /* TODO: open Sebastn checkout */ }}
+        style=\{{
+          padding: 'var(--space-3) var(--space-6)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          border: 'none',
+          background: 'var(--primary)',
+          color: 'var(--bg)',
+          fontWeight: 600,
+          fontSize: '1rem',
+          cursor: 'pointer',
+        }}
+      >
+        Subscribe — $5/mo
+      </button>
+    </div>
+  );
+}

package/templates/dashboard/app/admin/data/[entity]/page.tsx.hbs

@@ -8,7 +8,20 @@ import { listEntities } from '../../../../src/lib/db';
  * implement in src/lib/db.ts) and renders rows as a basic table.
  * Auth-gating happens client-side via `useAuth` in the static export;
  * if you need entity-level RBAC, check `verifyToken` claims here.
+ *
+ * generateStaticParams is required for `output: "export"`. Add the
+ * entity names your app actually uses. Unknown slugs are blocked by
+ * `dynamicParams = false`.
  */
+
+const ENTITIES = ['users', 'products', 'orders'];
+
+export function generateStaticParams() {
+  return ENTITIES.map((entity) => ({ entity }));
+}
+
+export const dynamicParams = false;
+
 export default async function EntityPage({
   params,
 }: {

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

@@ -1,8 +1,77 @@
-@import "@githat/ui/tokens.css";
+/*
+ * Tailwind v4 — required because @githat/nextjs/styles is processed
+ * through @tailwindcss/postcss. Import the utilities if you want them;
+ * the auth pages only need the CSS variables below.
+ */
 {{#if useTailwind}}
 @import "tailwindcss";
 {{/if}}
 
+/*
+ * Self-contained design tokens.
+ *
+ * Defines the CSS variables used by @githat/nextjs/styles and all
+ * template components. Override these to re-skin the whole app.
+ */
+
+: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;
+  --info:         #0ea5e9;
+
+  /* Spacing — used by @githat/nextjs/styles */
+  --space-1:  0.25rem;
+  --space-2:  0.5rem;
+  --space-3:  0.75rem;
+  --space-4:  1rem;
+  --space-5:  1.25rem;
+  --space-6:  1.5rem;
+  --space-8:  2rem;
+  --space-12: 3rem;
+
+  /* Radius */
+  --radius:    0.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+
+  /* Fonts */
+  --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-wordmark: 'Instrument Serif', Georgia, serif;
+  --font-mono:     'Fira Code', 'Cascadia Code', Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:           #09090b;
+    --surface:      #111113;
+    --surface-sub:  #1e1e2e;
+    --border:       #27272a;
+    --fg:           #fafafa;
+    --fg-muted:     #a1a1aa;
+    --fg-subtle:    #71717a;
+  }
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -13,6 +82,7 @@ body {
   font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
   background: var(--bg, #09090b);
   color: var(--fg, #fafafa);
+  line-height: 1.5;
 }
 
 a {

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

@@ -1,5 +1,4 @@
 import { GitHatProvider } from '@githat/nextjs';
-import { Wordmark } from '@githat/ui';
 import '@githat/nextjs/styles';
 import './globals.css';
 {{#if includeGithatFolder}}
@@ -33,7 +32,9 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
 {{/if}}
         }}>
           <header style=\{{ padding: 'var(--space-4, 1rem) var(--space-6, 1.5rem)', borderBottom: '1px solid var(--border, #e5e7eb)' }}>
-            <Wordmark name="{{businessName}}" size="md" href="/" />
+            <a href="/" style=\{{ textDecoration: 'none', color: 'inherit', fontWeight: 700, fontSize: '1.125rem' }}>
+              {{businessName}}
+            </a>
           </header>
           <main>{children}</main>
         </GitHatProvider>

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

@@ -1,5 +1,4 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
-import { Wordmark } from '@githat/ui';
 
 const hasKey = !!process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY;
 
@@ -7,7 +6,9 @@ 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}}>
-        <Wordmark name="{{businessName}}" size="xl" />
+        <h1 {{#if useTailwind}}className="text-2xl font-bold"{{else}}style=\{{ fontSize: '1.5rem', fontWeight: 700 }}{{/if}}>
+          {{businessName}}
+        </h1>
         <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
           Get started in 3 steps
         </p>
@@ -57,7 +58,9 @@ 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}}>
-      <Wordmark name="{{businessName}}" size="xl" />
+      <h1 {{#if useTailwind}}className="text-2xl font-bold"{{else}}style=\{{ fontSize: '1.5rem', fontWeight: 700 }}{{/if}}>
+        {{businessName}}
+      </h1>
       <p {{#if useTailwind}}className="text-zinc-400 max-w-lg text-center"{{else}}style=\{{ color: '#a1a1aa', maxWidth: '32rem', textAlign: 'center' }}{{/if}}>
         {{description}}
       </p>