@proofkit/cli 1.1.8 → 1.2.0-beta.0

package/template/nextjs-shadcn/.vscode/settings.json

@@ -0,0 +1,35 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[graphql]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "emmet.showExpandedAbbreviation": "never",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  }
+}

package/template/nextjs-shadcn/README.md

@@ -0,0 +1,27 @@
+# ProofKit NextJS Template
+
+This is a [NextJS](https://nextjs.org/) project bootstrapped with `@proofkit/cli`. Learn more at [proofkit.dev](https://proofkit.dev)
+
+## What's next? How do I make an app with this?
+
+While this template is designed to be a minimal starting point, the proofkit CLI will guide you through adding additional features and pages.
+
+To add new things to your project, simply run the `proofkit` script from the project's root directory.
+
+e.g. `npm run proofkit` or `pnpm proofkit` etc.
+
+For more information, see the full [ProofKit documentation](https://proofkit.dev).
+
+## Project Structure
+
+ProofKit projects have an opinionated structure to help you get started and some conventions must be maintained to ensure that the CLI can properly inject new features and components.
+
+The `src` directory is the home for your application code. It is used for most things except for configuration and is organized as follows:
+
+- `app` - NextJS app router, where your pages and routes are defined
+- `components` - Shared components used throughout the app
+- `server` - Code that connects to backend databases and services that should not be exposed in the browser
+
+Anytime you see an `internal` folder, you should not modify any files inside. These files are maintained exclusively by the ProofKit CLI and changes to them may be overwritten.
+
+Anytime you see a componet file that begins with `slot-`, you _may_ modify the content, but do not rename, remove, or move them. These are desigend to be customized, but are still used by the CLI to inject additional content. If a slot is not needed by your app, you can have the compoment return `null` or an empty fragment: `<></>`

package/template/nextjs-shadcn/_gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template/nextjs-shadcn/biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": [
+      "**",
+      "!node_modules",
+      "!.next",
+      "!dist",
+      "!build"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    },
+    "domains": {
+      "next": "recommended",
+      "react": "recommended"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "extends": [
+    "ultracite"
+  ]
+}

package/template/nextjs-shadcn/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/template/nextjs-shadcn/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+import '@/lib/env';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/template/nextjs-shadcn/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "raw-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "biome check",
+    "format": "biome format --write"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.13.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.541.0",
+    "next": "15.5.0",
+    "next-themes": "^0.4.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.2.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.7",
+    "typescript": "^5",
+    "ultracite": "5.2.4"
+  },
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
+}

package/template/nextjs-shadcn/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/template/nextjs-shadcn/proofkit.json

@@ -0,0 +1,6 @@
+{
+  "ui": "shadcn",
+  "envFile": ".env",
+  "appType": "browser",
+  "registryTemplates": ["utils/t3-env"]
+}

package/template/nextjs-shadcn/src/app/(main)/layout.tsx

@@ -0,0 +1,6 @@
+import AppShell from "@/components/AppShell/internal/AppShell";
+import React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <AppShell>{children}</AppShell>;
+}

package/template/nextjs-shadcn/src/app/(main)/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import {
+  CheckIcon,
+  CopyIcon,
+  ExternalLinkIcon,
+  GithubIcon,
+  TerminalIcon,
+} from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+function InlineSnippet({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return;
+    }
+    navigator.clipboard.writeText(command).then(
+      () => {
+        setCopied(true);
+        const timeoutInMilliseconds = 2000;
+        setTimeout(() => setCopied(false), timeoutInMilliseconds);
+      },
+      () => {
+        // do nothing
+      }
+    );
+  };
+
+  return (
+    <div className="relative w-full overflow-hidden rounded-md border bg-muted text-left">
+      <div className="flex items-center gap-2 px-3 py-2">
+        <TerminalIcon className="text-muted-foreground" size={16} />
+        <div className="flex-1 overflow-x-auto text-left">
+          <code className="whitespace-nowrap font-mono text-sm md:text-base">
+            {command}
+          </code>
+        </div>
+        <Button
+          aria-label={copied ? 'Copied' : 'Copy'}
+          onClick={onCopy}
+          size="icon"
+          variant="ghost"
+        >
+          {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  return (
+    <div className="flex min-h-[calc(100dvh-var(--header-height,56px))] flex-col">
+      <div className="mx-auto mt-20 max-w-screen-md px-4">
+        <div className="flex flex-col items-center gap-6 text-center">
+          {/** biome-ignore lint/performance/noImgElement: just a template image */}
+          <img
+            alt="ProofKit"
+            className="h-auto max-h-64 w-auto"
+            height={256}
+            src="https://raw.githubusercontent.com/proofgeist/proofkit/dde6366c529104658dfba67a8fc2910a8644fc64/docs/src/assets/proofkit.png"
+            width={256}
+          />
+          <h1 className="font-bold text-3xl text-foreground">Welcome!</h1>
+
+          <p className="text-balance text-base text-muted-foreground">
+            This is the base template home page. To add more pages, components,
+            or other features, run the ProofKit CLI from within your project.
+          </p>
+
+          <InlineSnippet command="pnpm proofkit" />
+
+          <p className="text-balance text-base text-muted-foreground">
+            To change this page, open <code>src/app/(main)/page.tsx</code>
+          </p>
+          <div>
+            <Button asChild variant="outline">
+              <a href="https://proofkit.dev" rel="noreferrer" target="_blank">
+                ProofKit Docs <ExternalLinkIcon size={16} />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-auto border-border border-t py-4">
+        <div className="mx-auto flex max-w-screen-md items-center justify-between px-4">
+          <div className="text-muted-foreground text-sm">
+            Sponsored by{' '}
+            <a
+              className="text-foreground underline hover:text-primary"
+              href="https://proofgeist.com"
+              rel="noopener proofkit-app"
+              target="_blank"
+            >
+              Proof+Geist
+            </a>{' '}
+            and{' '}
+            <a
+              className="text-foreground underline hover:text-primary"
+              href="https://ottomatic.cloud"
+              rel="noopener proofkit-app"
+              target="_blank"
+            >
+              Ottomatic
+            </a>
+          </div>
+          <div>
+            <a
+              className="text-muted-foreground hover:text-foreground"
+              href="https://github.com/proofgeist/proofkit"
+              rel="noopener"
+              target="_blank"
+            >
+              <GithubIcon size={20} />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/nextjs-shadcn/src/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/nextjs-shadcn/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import Providers from '@/components/providers';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'My ProofKit App',
+  description: 'Generated by the ProofKit CLI',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/nextjs-shadcn/src/app/navigation.tsx

@@ -0,0 +1,12 @@
+import { type ProofKitRoute } from "@proofkit/cli";
+
+export const primaryRoutes: ProofKitRoute[] = [
+  {
+    label: "Dashboard",
+    type: "link",
+    href: "/",
+    exactMatch: true,
+  },
+];
+
+export const secondaryRoutes: ProofKitRoute[] = [];

package/template/nextjs-shadcn/src/components/AppLogo.tsx

@@ -0,0 +1,6 @@
+import { InfinityIcon } from "lucide-react";
+import React from "react";
+
+export default function AppLogo() {
+  return <InfinityIcon size={32} />;
+}

package/template/nextjs-shadcn/src/components/AppShell/internal/AppShell.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Header } from "@/components/AppShell/internal/Header";
+import { headerHeight } from "./config";
+
+export default function MainAppShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className="min-h-dvh"
+      style={{ ["--header-height" as any]: `${headerHeight}px` }}
+    >
+      <header style={{ height: "var(--header-height)" }}>
+        <Header />
+      </header>
+      <main className="mx-auto min-h-[calc(100dvh-var(--header-height,56px))] max-w-screen-2xl px-6">
+        {children}
+      </main>
+    </div>
+  );
+}

package/template/nextjs-shadcn/src/components/AppShell/internal/Header.module.css

@@ -0,0 +1,33 @@
+.header {
+  margin-bottom: 7.5rem;
+  background-color: var(--pk-header-bg, transparent);
+  border-bottom: 1px solid var(--pk-border, rgba(0,0,0,0.08));
+}
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  text-decoration: none;
+  color: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.link:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .link:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}

package/template/nextjs-shadcn/src/components/AppShell/internal/Header.tsx

@@ -0,0 +1,30 @@
+import SlotHeaderCenter from "../slot-header-center";
+import SlotHeaderLeft from "../slot-header-left";
+import SlotHeaderRight from "../slot-header-right";
+import { headerHeight } from "./config";
+import classes from "./Header.module.css";
+import HeaderMobileMenu from "./HeaderMobileMenu";
+
+export function Header() {
+  return (
+    <header
+      className={classes.header}
+      style={{ height: "var(--header-height)" }}
+    >
+      <div className={"mx-auto h-full max-w-screen-md px-4"}>
+        <div className="flex h-full w-full items-center justify-between">
+          <SlotHeaderLeft />
+          <div className="hidden md:block">
+            <SlotHeaderCenter />
+          </div>
+          <div className="hidden md:block">
+            <SlotHeaderRight />
+          </div>
+          <div className="block md:hidden">
+            <HeaderMobileMenu />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/nextjs-shadcn/src/components/AppShell/internal/HeaderMobileMenu.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import SlotHeaderMobileMenuContent from "../slot-header-mobile-content";
+
+export default function HeaderMobileMenu() {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        className="inline-flex h-8 w-8 items-center justify-center rounded border border-zinc-300 dark:border-zinc-700"
+        aria-label="Open menu"
+        onClick={() => setOpened((v) => !v)}
+      >
+        <span className="block h-0.5 w-4 bg-current" />
+      </button>
+      {opened && (
+        <div className="absolute right-0 z-50 mt-2 w-[90vw] max-w-xs rounded-md border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-800 dark:bg-zinc-900">
+          <SlotHeaderMobileMenuContent closeMenu={() => setOpened(false)} />
+        </div>
+      )}
+    </div>
+  );
+}