@primstack/cli 0.0.1

package/dist/templates/hosted/root/CLAUDE.md.template

@@ -0,0 +1,139 @@
+# {{PROJECT_NAME}}
+
+A Primstack hosted project — Next.js + Primstack UI + D1 + Auth.js, deployed to Primstack hosting.
+
+## Stack
+
+- **Framework:** Next.js 14 (App Router, edge runtime)
+- **Components:** @primstack/ui (60+ Radix-based React components)
+- **Styling:** Tailwind CSS + Primstack design tokens
+- **Database:** Cloudflare D1 via Drizzle ORM (local D1 via `setupDevPlatform` in dev)
+- **Auth:** Auth.js v5 with GitHub provider + Drizzle adapter
+- **Hosting:** Primstack hosting (Cloudflare Pages via `@cloudflare/next-on-pages`)
+
+## Component Usage
+
+Import from `@primstack/ui/<component>`:
+
+```tsx
+import { Button } from '@primstack/ui/button';
+import { Card, CardHeader, CardContent } from '@primstack/ui/card';
+import { Input } from '@primstack/ui/input';
+import { Badge } from '@primstack/ui/badge';
+```
+
+All components accept `className` for Tailwind overrides. Use `variant` and `size` props.
+
+## Adding a Database Table
+
+1. **Define schema** in `src/db/schema.ts`:
+```ts
+export const posts = sqliteTable('posts', {
+  id: text('id').primaryKey(),
+  title: text('title').notNull(),
+  content: text('content'),
+  userId: text('user_id').references(() => authUsers.id),
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().default(sql`(unixepoch())`),
+});
+```
+
+2. **Generate migration:**
+```bash
+npx drizzle-kit generate
+```
+
+3. **Migrate locally:**
+```bash
+npx drizzle-kit migrate
+```
+
+4. Migrations apply automatically on `prim deploy`.
+
+## Adding a Server Action
+
+Create `src/app/actions/posts.ts`:
+
+```ts
+'use server';
+import { getDatabase } from '@/lib/db';
+import { posts } from '@/db/schema';
+
+export async function createPost(formData: FormData) {
+  const db = getDatabase();
+  const id = crypto.randomUUID();
+  await db.insert(posts).values({
+    id,
+    title: formData.get('title') as string,
+    content: formData.get('content') as string,
+  });
+  return { success: true, id };
+}
+```
+
+`getDatabase()` uses the D1 binding via `getRequestContext()` in both production and local dev (via `setupDevPlatform` in `src/instrumentation.ts`).
+
+## Adding a New Page
+
+All pages that use CF bindings (D1, env vars) must declare edge runtime:
+
+```tsx
+export const runtime = 'edge';
+
+export default function MyPage() {
+  return <div>Hello</div>;
+}
+```
+
+## Adding Auth-Protected Pages
+
+1. Use `auth()` in a Server Component:
+```tsx
+import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+
+export const runtime = 'edge';
+
+export default async function ProtectedPage() {
+  const session = await auth();
+  if (!session) redirect('/auth/login');
+
+  return <div>Welcome {session.user?.name}</div>;
+}
+```
+
+2. Or use the middleware (already protects `/dashboard/*`).
+
+## Environment Variables
+
+```bash
+prim env set AUTH_SECRET=...           # Auth.js secret (required)
+prim env set GITHUB_CLIENT_ID=...     # GitHub OAuth app
+prim env set GITHUB_CLIENT_SECRET=... # GitHub OAuth secret
+prim deploy                           # Vars injected automatically
+```
+
+D1 is bound automatically via the Primstack platform — no need to set `DATABASE_URL`.
+
+## Deployment
+
+```bash
+prim deploy              # Deploy to production
+prim deploy --preview    # Preview deployment
+prim deploy --no-build   # Upload pre-built output
+prim deploy -m "message" # Deploy with message
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/app/layout.tsx` | Root layout with ThemeProvider |
+| `src/app/page.tsx` | Home page |
+| `src/db/schema.ts` | Database schema (Drizzle) |
+| `src/lib/db.ts` | Database connection (D1 via getRequestContext) |
+| `src/lib/auth.ts` | Auth.js configuration + Drizzle adapter |
+| `src/middleware.ts` | Auth middleware |
+| `src/instrumentation.ts` | setupDevPlatform for local D1 |
+| `src/app/actions/*.ts` | Server Actions |
+| `wrangler.toml` | CF Pages config (D1 binding) |
+| `primstack.config.json` | Project configuration |

package/dist/templates/hosted/root/drizzle.config.ts.template

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  out: './src/db/migrations',
+  dialect: 'sqlite',
+  dbCredentials: {
+    url: process.env.DATABASE_URL ?? 'file:./local.db',
+  },
+});

package/dist/templates/hosted/root/next.config.ts.template

@@ -0,0 +1,15 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: [
+    '@primstack/ui',
+    '@primstack/theme',
+    '@primstack/tokens',
+    '@primstack/core',
+  ],
+  images: {
+    unoptimized: true,
+  },
+};
+
+export default nextConfig;

package/dist/templates/hosted/root/package.json.template

@@ -0,0 +1,40 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build && npx @cloudflare/next-on-pages",
+    "preview": "npx wrangler pages dev .vercel/output/static --compatibility-date=2024-09-23",
+    "lint": "next lint",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@auth/drizzle-adapter": "^1.7.0",
+    "@primstack/core": "latest",
+    "@primstack/theme": "latest",
+    "@primstack/tokens": "latest",
+    "@primstack/ui": "latest",
+    "drizzle-orm": "^0.38.0",
+    "next": "^14.2.0",
+    "next-auth": "^5.0.0-beta.25",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.0",
+    "better-sqlite3": "^11.0.0",
+    "drizzle-kit": "^0.30.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.7.0",
+    "wrangler": "^4.0.0"
+  }
+}

package/dist/templates/hosted/root/postcss.config.mjs.template

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/dist/templates/hosted/root/primstack.config.json.template

@@ -0,0 +1,5 @@
+{
+  "projectType": "hosted",
+  "personality": "{{PERSONALITY}}",
+  "componentPath": "src/components/ui"
+}

package/dist/templates/hosted/root/tailwind.config.ts.template

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@primstack/ui/**/*.js',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

package/dist/templates/hosted/root/tsconfig.json.template

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "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": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/hosted/root/wrangler.toml.template

@@ -0,0 +1,9 @@
+name = "{{PROJECT_NAME}}"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"
+
+[[d1_databases]]
+binding = "DB"
+database_name = "{{PROJECT_NAME}}-db"
+database_id = "local"

package/dist/templates/hosted/src/app/actions/example.ts.template

@@ -0,0 +1,50 @@
+'use server';
+
+import { eq } from 'drizzle-orm';
+import { getDatabase } from '@/lib/db';
+import { items } from '@/db/schema';
+
+export async function createItem(formData: FormData) {
+  const title = formData.get('title') as string;
+  const description = formData.get('description') as string | null;
+
+  if (!title?.trim()) {
+    return { error: 'Title is required' };
+  }
+
+  const db = getDatabase();
+  const id = crypto.randomUUID();
+
+  await db.insert(items).values({
+    id,
+    title: title.trim(),
+    description: description?.trim() || null,
+  });
+
+  return { success: true, id };
+}
+
+export async function listItems() {
+  const db = getDatabase();
+  return db.select().from(items).orderBy(items.createdAt);
+}
+
+export async function toggleItem(id: string) {
+  const db = getDatabase();
+  const [item] = await db.select().from(items).where(eq(items.id, id)).limit(1);
+
+  if (!item) return { error: 'Item not found' };
+
+  await db
+    .update(items)
+    .set({ completed: !item.completed })
+    .where(eq(items.id, id));
+
+  return { success: true };
+}
+
+export async function deleteItem(id: string) {
+  const db = getDatabase();
+  await db.delete(items).where(eq(items.id, id));
+  return { success: true };
+}

package/dist/templates/hosted/src/app/api/health/route.ts.template

@@ -0,0 +1,5 @@
+export const runtime = 'edge';
+
+export function GET() {
+  return Response.json({ ok: true, timestamp: Date.now() });
+}

package/dist/templates/hosted/src/app/auth/login/page.tsx.template

@@ -0,0 +1,32 @@
+import { signIn } from '@/lib/auth';
+import { Button } from '@primstack/ui/button';
+import { Heading } from '@primstack/ui/heading';
+import { Text } from '@primstack/ui/text';
+
+export const runtime = 'edge';
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md space-y-6 text-center">
+        <div>
+          <Heading size="h2">Welcome back</Heading>
+          <Text className="text-muted-foreground mt-1">
+            Sign in to {{PROJECT_NAME}}
+          </Text>
+        </div>
+
+        <form
+          action={async () => {
+            'use server';
+            await signIn('github', { redirectTo: '/' });
+          }}
+        >
+          <Button type="submit" className="w-full" size="lg">
+            Sign in with GitHub
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/dist/templates/hosted/src/app/globals.css.template

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/templates/hosted/src/app/layout.tsx.template

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next';
+import { ThemeProvider } from '@primstack/theme';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'Built with Primstack',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen antialiased">
+        <ThemeProvider personality="{{PERSONALITY}}">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/dist/templates/hosted/src/app/page.tsx.template

@@ -0,0 +1,34 @@
+export const runtime = 'edge';
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-8">
+      <div className="max-w-2xl text-center space-y-6">
+        <h1 className="text-4xl font-bold tracking-tight">
+          {{PROJECT_NAME}}
+        </h1>
+        <p className="text-lg text-muted-foreground">
+          Built with Primstack. Edit{' '}
+          <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono">
+            src/app/page.tsx
+          </code>{' '}
+          to get started.
+        </p>
+        <div className="flex gap-4 justify-center">
+          <a
+            href="https://primstack.ai/docs"
+            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
+          >
+            Documentation
+          </a>
+          <a
+            href="https://primstack.ai/components"
+            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground"
+          >
+            Components
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}

package/dist/templates/hosted/src/db/migrations/0000_initial.sql.template

@@ -0,0 +1,43 @@
+-- Auth.js tables
+CREATE TABLE IF NOT EXISTS auth_users (
+  id TEXT PRIMARY KEY,
+  name TEXT,
+  email TEXT UNIQUE,
+  email_verified INTEGER,
+  image TEXT
+);
+
+CREATE TABLE IF NOT EXISTS accounts (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL REFERENCES auth_users(id) ON DELETE CASCADE,
+  type TEXT NOT NULL,
+  provider TEXT NOT NULL,
+  provider_account_id TEXT NOT NULL,
+  refresh_token TEXT,
+  access_token TEXT,
+  expires_at INTEGER,
+  token_type TEXT,
+  scope TEXT,
+  id_token TEXT,
+  session_state TEXT
+);
+
+CREATE UNIQUE INDEX IF NOT EXISTS accounts_provider_idx ON accounts(provider, provider_account_id);
+
+CREATE TABLE IF NOT EXISTS sessions (
+  id TEXT PRIMARY KEY,
+  session_token TEXT NOT NULL UNIQUE,
+  user_id TEXT NOT NULL REFERENCES auth_users(id) ON DELETE CASCADE,
+  expires INTEGER NOT NULL
+);
+
+-- App tables
+CREATE TABLE IF NOT EXISTS items (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT,
+  completed INTEGER NOT NULL DEFAULT 0,
+  user_id TEXT REFERENCES auth_users(id) ON DELETE SET NULL,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch()),
+  updated_at INTEGER NOT NULL DEFAULT (unixepoch())
+);

package/dist/templates/hosted/src/db/schema.ts.template

@@ -0,0 +1,52 @@
+import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+
+// ── Auth.js tables ─────────────────────────────────────────────────
+
+export const authUsers = sqliteTable('auth_users', {
+  id: text('id').primaryKey(),
+  name: text('name'),
+  email: text('email').unique(),
+  emailVerified: integer('email_verified', { mode: 'timestamp' }),
+  image: text('image'),
+});
+
+export const accounts = sqliteTable('accounts', {
+  id: text('id').primaryKey(),
+  userId: text('user_id').notNull().references(() => authUsers.id, { onDelete: 'cascade' }),
+  type: text('type').notNull(),
+  provider: text('provider').notNull(),
+  providerAccountId: text('provider_account_id').notNull(),
+  refreshToken: text('refresh_token'),
+  accessToken: text('access_token'),
+  expiresAt: integer('expires_at'),
+  tokenType: text('token_type'),
+  scope: text('scope'),
+  idToken: text('id_token'),
+  sessionState: text('session_state'),
+}, (table) => [
+  uniqueIndex('accounts_provider_idx').on(table.provider, table.providerAccountId),
+]);
+
+export const sessions = sqliteTable('sessions', {
+  id: text('id').primaryKey(),
+  sessionToken: text('session_token').notNull().unique(),
+  userId: text('user_id').notNull().references(() => authUsers.id, { onDelete: 'cascade' }),
+  expires: integer('expires', { mode: 'timestamp' }).notNull(),
+});
+
+// ── App tables ─────────────────────────────────────────────────────
+
+export const items = sqliteTable('items', {
+  id: text('id').primaryKey(),
+  title: text('title').notNull(),
+  description: text('description'),
+  completed: integer('completed', { mode: 'boolean' }).notNull().default(false),
+  userId: text('user_id').references(() => authUsers.id, { onDelete: 'set null' }),
+  createdAt: integer('created_at', { mode: 'timestamp' })
+    .notNull()
+    .default(sql`(unixepoch())`),
+  updatedAt: integer('updated_at', { mode: 'timestamp' })
+    .notNull()
+    .default(sql`(unixepoch())`),
+});

package/dist/templates/hosted/src/env.d.ts.template

@@ -0,0 +1,10 @@
+interface CloudflareEnv {
+  DB: D1Database;
+}
+
+declare module '@cloudflare/next-on-pages' {
+  export function getRequestContext(): {
+    env: CloudflareEnv;
+    ctx: ExecutionContext;
+  };
+}

package/dist/templates/hosted/src/instrumentation.ts.template

@@ -0,0 +1,6 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const { setupDevPlatform } = await import('@cloudflare/next-on-pages/next-dev');
+    await setupDevPlatform();
+  }
+}

package/dist/templates/hosted/src/lib/auth.ts.template

@@ -0,0 +1,35 @@
+import NextAuth from 'next-auth';
+import GitHub from 'next-auth/providers/github';
+import { DrizzleAdapter } from '@auth/drizzle-adapter';
+import { getDatabase } from './db';
+import { authUsers, accounts, sessions } from '../db/schema';
+
+/**
+ * Auth.js v5 configuration.
+ *
+ * Uses the Drizzle adapter to persist users, accounts, and sessions in D1.
+ * JWT strategy is used so middleware can validate sessions at the edge
+ * without a DB round-trip on every request.
+ *
+ * NextAuth is called with a callback so the adapter is created per-request
+ * (getDatabase() requires an active request context for getRequestContext()).
+ */
+export const { handlers, signIn, signOut, auth } = NextAuth(() => ({
+  adapter: DrizzleAdapter(getDatabase(), {
+    usersTable: authUsers,
+    accountsTable: accounts,
+    sessionsTable: sessions,
+  }),
+  providers: [
+    GitHub({
+      clientId: process.env.GITHUB_CLIENT_ID!,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
+    }),
+  ],
+  session: {
+    strategy: 'jwt',
+  },
+  pages: {
+    signIn: '/auth/login',
+  },
+}));

package/dist/templates/hosted/src/lib/db.ts.template

@@ -0,0 +1,17 @@
+import { getRequestContext } from '@cloudflare/next-on-pages';
+import { drizzle } from 'drizzle-orm/d1';
+import * as schema from '../db/schema';
+
+export type AppDb = ReturnType<typeof drizzle<typeof schema>>;
+
+/**
+ * Get the database for the current request.
+ *
+ * In production: uses the D1 binding from Cloudflare Pages.
+ * In development: uses a local D1 instance via setupDevPlatform()
+ * (configured in src/instrumentation.ts).
+ */
+export function getDatabase() {
+  const d1 = getRequestContext().env.DB;
+  return drizzle(d1, { schema });
+}

package/dist/templates/hosted/src/middleware.ts.template

@@ -0,0 +1,6 @@
+export { auth as middleware } from '@/lib/auth';
+
+export const config = {
+  // Protect all routes under /dashboard, /api (except health and auth)
+  matcher: ['/dashboard/:path*'],
+};