create-githat-app 1.0.14 → 1.0.16

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/portfolio/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/portfolio/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/portfolio/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/portfolio/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>
+  );
+}

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

@@ -0,0 +1,86 @@
+import Link from 'next/link';
+
+/**
+ * Portfolio homepage.
+ *
+ * Personal/professional site for showing projects you've shipped.
+ * Public reads, auth-gated edits — sign in only when you want to
+ * add or edit a project. Replaces Linktree + Cargo + a static
+ * site generator + Vercel.
+ *
+ * Project data is hardcoded for the starter. Real apps store
+ * projects in a Postgres / DynamoDB table or in Markdown files,
+ * and fetch in this server component.
+ */
+
+const PROJECTS = [
+  {
+    slug: 'project-one',
+    title: 'A thing I shipped',
+    summary: 'Two-line description of the project, what it does, what was hard.',
+    year: 2026,
+    role: 'Designer + Engineer',
+  },
+  {
+    slug: 'project-two',
+    title: 'Another thing',
+    summary: 'A research project that turned into a product. Worked for two years.',
+    year: 2025,
+    role: 'Lead',
+  },
+  {
+    slug: 'project-three',
+    title: 'A side project',
+    summary: 'Built in a weekend, used by 12 people, learned three things.',
+    year: 2025,
+    role: 'Solo',
+  },
+];
+
+export default function Home() {
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)' }}>
+      <section style=\{{ padding: 'var(--space-12) var(--space-4)', maxWidth: '40rem', margin: '0 auto' }}>
+        <h1 style=\{{
+          fontFamily: 'var(--font-wordmark, Georgia, serif)',
+          fontSize: 'clamp(2rem, 5vw, 3rem)',
+          lineHeight: 1.1,
+          marginBottom: 'var(--space-3)',
+        }}>
+          {{businessName}}
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.125rem', lineHeight: 1.7 }}>
+          One-paragraph intro. What you do, what you care about, where to find
+          the rest of you. Edit this in <code>app/page.tsx</code>.
+          <br /><br />
+          <Link href="/about" style=\{{ color: 'var(--primary)' }}>More about me →</Link>
+        </p>
+      </section>
+
+      <section style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '48rem', margin: '0 auto' }}>
+        <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-6)' }}>Projects</h2>
+        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          {PROJECTS.map((p) => (
+            <li key={p.slug}>
+              <Link href={`/${p.slug}`} style=\{{
+                display: 'block',
+                padding: 'var(--space-5)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                textDecoration: 'none',
+              }}>
+                <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-3)', flexWrap: 'wrap', marginBottom: 'var(--space-2)' }}>
+                  <h3 style=\{{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{p.title}</h3>
+                  <span style=\{{ fontSize: '0.75rem', color: 'var(--fg-subtle)' }}>{p.role} · {p.year}</span>
+                </div>
+                <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem' }}>{p.summary}</p>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
+
+export default nextConfig;

package/templates/portfolio/postcss.config.mjs.hbs

@@ -0,0 +1,14 @@
+/*
+ * Plain template — Tailwind v4 PostCSS plugin is required even though
+ * the plain scaffold doesn't use Tailwind utility classes. The auth
+ * page CSS shipped by `@githat/nextjs/styles` is processed through
+ * @tailwindcss/postcss at build time. Drop this config and the
+ * auth pages render unstyled.
+ */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/templates/portfolio/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/portfolio/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/saas/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/saas/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/saas/app/admin/billing/page.tsx.hbs

@@ -0,0 +1,145 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Billing — Sebastn-powered subscription management.
+ *
+ * The starter shows the data shape; a real app fetches the
+ * org's subscription state from your backend (which subscribed
+ * to Sebastn webhooks) and renders accordingly.
+ *
+ * Key actions:
+ *  - Change plan → opens Sebastn checkout via /api/billing/checkout
+ *  - Cancel → calls /api/billing/cancel which calls Sebastn
+ *  - Update payment method → opens Sebastn customer portal
+ *
+ * All three are stubs — wire them when you connect Sebastn.
+ */
+export default function BillingPage() {
+  const { isSignedIn, isLoading } = useAuth();
+
+  if (isLoading) return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)' }}>Loading…</div>;
+  if (!isSignedIn) {
+    return (
+      <div style=\{{ padding: 'var(--space-8)', textAlign: 'center' }}>
+        <p>Sign in to manage billing.</p>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+      </div>
+    );
+  }
+
+  const subscription = {
+    status: 'trialing' as 'trialing' | 'active' | 'past_due' | 'canceled',
+    plan: 'Team',
+    price: 29,
+    renews: '2026-05-14',
+    seats: 5,
+    seatsUsed: 3,
+  };
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '48rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <Link href="/admin" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+          ← Dashboard
+        </Link>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-6)' }}>
+          Billing
+        </h1>
+
+        <section style=\{{
+          padding: 'var(--space-6)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          border: '1px solid var(--border)',
+          background: 'var(--surface)',
+          marginBottom: 'var(--space-6)',
+        }}>
+          <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 'var(--space-4)' }}>
+            <div>
+              <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-1)' }}>{subscription.plan}</h2>
+              <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>${subscription.price}/mo · renews {subscription.renews}</p>
+            </div>
+            <Badge status={subscription.status} />
+          </div>
+
+          <div style=\{{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
+            <button onClick={() => { /* TODO: Sebastn checkout */ }} style=\{{
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: 'none',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}>
+              Change plan
+            </button>
+            <button onClick={() => { /* TODO: Sebastn customer portal */ }} style=\{{
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: '1px solid var(--border)',
+              background: 'transparent',
+              color: 'var(--fg)',
+              cursor: 'pointer',
+            }}>
+              Update payment method
+            </button>
+            <button onClick={() => { /* TODO: cancel via /api/billing/cancel */ }} style=\{{
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: '1px solid var(--border)',
+              background: 'transparent',
+              color: 'var(--danger)',
+              cursor: 'pointer',
+            }}>
+              Cancel
+            </button>
+          </div>
+        </section>
+
+        <section style=\{{
+          padding: 'var(--space-5)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          border: '1px solid var(--border)',
+          background: 'var(--surface)',
+        }}>
+          <h3 style=\{{ fontSize: '1rem', marginBottom: 'var(--space-2)' }}>Seats used</h3>
+          <div style=\{{ fontSize: '1.5rem', fontWeight: 600, marginBottom: 'var(--space-3)' }}>
+            {subscription.seatsUsed} of {subscription.seats}
+          </div>
+          <div style=\{{ height: '8px', borderRadius: '4px', background: 'var(--surface-sub)', overflow: 'hidden' }}>
+            <div style=\{{
+              width: `${(subscription.seatsUsed / subscription.seats) * 100}%`,
+              height: '100%',
+              background: 'var(--primary)',
+            }} />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function Badge({ status }: { status: 'trialing' | 'active' | 'past_due' | 'canceled' }) {
+  const styles: Record<typeof status, { bg: string; fg: string; label: string }> = {
+    trialing: { bg: 'var(--info)',    fg: 'var(--bg)', label: 'TRIAL' },
+    active:   { bg: 'var(--success)', fg: 'var(--bg)', label: 'ACTIVE' },
+    past_due: { bg: 'var(--warn)',    fg: 'var(--bg)', label: 'PAST DUE' },
+    canceled: { bg: 'var(--danger)',  fg: 'var(--bg)', label: 'CANCELED' },
+  };
+  const s = styles[status];
+  return (
+    <span style=\{{
+      padding: 'var(--space-1) var(--space-3)',
+      borderRadius: 'var(--radius-full, 9999px)',
+      background: s.bg,
+      color: s.fg,
+      fontSize: '0.75rem',
+      fontWeight: 700,
+    }}>
+      {s.label}
+    </span>
+  );
+}