create-githat-app 1.3.0 → 1.4.0

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

@@ -0,0 +1,119 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * 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.
+ */
+
+const SAMPLE_POSTS: Record<string, { title: string; gated: boolean; body: string }> = {
+  welcome: {
+    title: 'Welcome to {{businessName}}',
+    gated: false,
+    body: 'This is the first post. Free to read. The rest of this template ' +
+          'is a working content site — paywall, newsletter, author dashboard. ' +
+          'Replace the sample posts with content from your CMS, Markdown files, ' +
+          'or a Postgres table.',
+  },
+  'first-deep-dive': {
+    title: 'Why I started this',
+    gated: false,
+    body: 'The one thing nobody told me when I started writing this newsletter: ' +
+          'it takes the first ten posts before you find the voice. Free to read.',
+  },
+  'paid-essay-1': {
+    title: 'Paid essay: the long version',
+    gated: true,
+    body: 'This is the unfiltered version of the paid essay. It runs about 3,000 ' +
+          'words and gets into the parts I keep out of the free posts. Subscribe ' +
+          'to read the rest. Sebastn handles the checkout — we never touch your card.',
+  },
+};
+
+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>
+  );
+}
+
+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/content/next.config.ts.hbs

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

package/templates/content/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/content/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/content/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/dashboard/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/dashboard/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/dashboard/app/admin/data/[entity]/page.tsx.hbs

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { listEntities } from '../../../../src/lib/db';
+
+/**
+ * Generic data-table view for any entity in your DB.
+ *
+ * Server component — runs `listEntities(entityName)` (which you
+ * implement in src/lib/db.ts) and renders rows as a basic table.
+ * Auth-gating is enforced by the middleware in proxy.ts; if you
+ * need entity-level RBAC, check `verifyToken` claims here.
+ */
+export default async function EntityPage({
+  params,
+}: {
+  params: Promise<{ entity: string }>;
+}) {
+  const { entity } = await params;
+  const rows = await listEntities(entity);
+
+  const columns = rows.length > 0 ? Object.keys(rows[0]) : ['id'];
+
+  return (
+    <div style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '64rem', margin: '0 auto' }}>
+      <Link href="/admin" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+        ← Admin
+      </Link>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
+        {entity}
+      </h1>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+        {rows.length} row{rows.length === 1 ? '' : 's'}
+      </p>
+
+      <div style=\{{ overflowX: 'auto', borderRadius: 'var(--radius-md, 0.5rem)', border: '1px solid var(--border)' }}>
+        <table style=\{{ width: '100%', borderCollapse: 'collapse', background: 'var(--surface)' }}>
+          <thead>
+            <tr style=\{{ borderBottom: '1px solid var(--border)', background: 'var(--surface-sub)' }}>
+              {columns.map((c) => (
+                <th key={c} style=\{{
+                  padding: 'var(--space-3) var(--space-4)',
+                  textAlign: 'left',
+                  fontSize: '0.75rem',
+                  fontWeight: 600,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                  color: 'var(--fg-muted)',
+                }}>
+                  {c}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={String(row.id)} style=\{{ borderBottom: '1px solid var(--border)' }}>
+                {columns.map((c) => (
+                  <td key={c} style=\{{ padding: 'var(--space-3) var(--space-4)', fontSize: '0.875rem' }}>
+                    {String(row[c])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Auth-gated admin home — overview of every entity in your DB.
+ *
+ * The list is hardcoded for the starter. Real apps generate it
+ * from your schema (drizzle, prisma) or list it server-side via
+ * `listEntities()` from src/lib/db.ts.
+ */
+const ENTITIES = ['users', 'orders', 'invoices', 'products'];
+
+export default function AdminPage() {
+  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 access admin.</p>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '48rem', margin: '0 auto' }}>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-6)' }}>
+        Admin
+      </h1>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+        Pick an entity to browse. Edit src/lib/db.ts to point at your
+        real database.
+      </p>
+      <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 'var(--space-3)' }}>
+        {ENTITIES.map((e) => (
+          <li key={e}>
+            <Link href={`/admin/data/${e}`} style=\{{
+              display: 'block',
+              padding: 'var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface)',
+              color: 'var(--fg)',
+              textDecoration: 'none',
+            }}>
+              <div style=\{{ fontWeight: 600 }}>{e}</div>
+              <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginTop: 'var(--space-1)' }}>
+                Browse {e} →
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/dashboard/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/dashboard/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/dashboard/app/page.tsx.hbs

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { SignInButton, useAuth } from '@githat/nextjs';
+
+/**
+ * Dashboard template homepage.
+ *
+ * The pitch: you already have a database (Postgres, MySQL,
+ * DynamoDB, anything). You want auth-gated admin tooling on top of
+ * it without building auth from scratch.
+ *
+ * Replaces Retool + Auth0 + Vercel. Demonstrates GitHat as a
+ * "drop auth on your existing data" platform.
+ */
+export default function Home() {
+  const { isSignedIn } = useAuth();
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <section style=\{{
+        padding: 'var(--space-12) var(--space-4)',
+        textAlign: 'center',
+        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', marginBottom: 'var(--space-6)' }}>
+          Auth-gated admin UI for your existing database. Bring your
+          Postgres / MySQL / DynamoDB — we handle who can see it.
+        </p>
+        {!isSignedIn ? (
+          <SignInButton />
+        ) : (
+          <Link href="/admin" style=\{{
+            display: 'inline-block',
+            padding: 'var(--space-3) var(--space-6)',
+            borderRadius: 'var(--radius-md, 0.5rem)',
+            background: 'var(--primary)',
+            color: 'var(--bg)',
+            fontWeight: 600,
+            textDecoration: 'none',
+          }}>
+            Open dashboard →
+          </Link>
+        )}
+      </section>
+    </div>
+  );
+}

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

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

package/templates/dashboard/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/dashboard/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/dashboard/src/lib/db.ts.hbs

@@ -0,0 +1,39 @@
+/**
+ * Database adapter — bring your own.
+ *
+ * The dashboard template stays database-agnostic on purpose. Pick
+ * whatever fits and replace the stubs below:
+ *
+ *   Postgres:   `import { Pool } from 'pg';`
+ *   DynamoDB:   `import { DynamoDBClient } from '@aws-sdk/client-dynamodb';`
+ *   MySQL:      `import mysql from 'mysql2/promise';`
+ *   Drizzle/Prisma: drop in your existing client
+ *
+ * Set DATABASE_URL in .env.local.
+ *
+ * The `listEntities` and `getEntity` shapes are what the routes
+ * under /admin/data expect — keep the function names so the UI
+ * keeps working when you swap the body.
+ */
+
+export interface EntityRow {
+  id: string;
+  [key: string]: unknown;
+}
+
+export async function listEntities(entity: string): Promise<EntityRow[]> {
+  // TODO: replace with your real query, e.g.
+  //   const { rows } = await pool.query('SELECT * FROM ' + entity + ' LIMIT 100');
+  //   return rows;
+  void entity;
+  return [
+    { id: '1', name: 'Sample row 1', createdAt: new Date().toISOString() },
+    { id: '2', name: 'Sample row 2', createdAt: new Date().toISOString() },
+  ];
+}
+
+export async function getEntity(entity: string, id: string): Promise<EntityRow | null> {
+  // TODO: replace with your real query
+  void entity;
+  return { id, name: 'Sample row', createdAt: new Date().toISOString() };
+}

package/templates/dashboard/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/fullstack/apps-api-express/.env.example.hbs

@@ -0,0 +1,6 @@
+# GitHat Configuration
+GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here
+
+# Server
+PORT=3001
+CORS_ORIGIN=http://localhost:3000

package/templates/fullstack/apps-api-express/.env.local.hbs

@@ -0,0 +1,6 @@
+# GitHat Configuration
+GITHAT_PUBLISHABLE_KEY={{#if publishableKey}}{{publishableKey}}{{else}}pk_live_your_key_here{{/if}}
+
+# Server
+PORT=3001
+CORS_ORIGIN=http://localhost:3000

package/templates/fullstack/apps-api-express/package.json.hbs

@@ -0,0 +1,24 @@
+{
+  "name": "@{{projectName}}/api",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@githat/nextjs": "^0.2.6",
+    "cors": "^2.8.5",
+    "express": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.9.0"
+  }
+}