@tulip-systems/create-app 0.11.1

package/dist/templates/basic/src/server/db/types.ts

@@ -0,0 +1,3 @@
+import type * as schema from "./schema";
+
+export type DatabaseSchema = typeof schema;

package/dist/templates/basic/src/server/providers/email.ts

@@ -0,0 +1,3 @@
+import { Resend } from "resend";
+
+export const email = new Resend(process.env.RESEND_API_KEY);

package/dist/templates/basic/src/server/router/caller.ts

@@ -0,0 +1,10 @@
+import "server-only";
+
+import { createRouterClient } from "@orpc/server";
+import { headers } from "next/headers";
+import { createContext } from "./init";
+import { appRouter } from "./router";
+
+export const caller = createRouterClient(appRouter, {
+  context: async () => createContext({ headers: await headers() }),
+});

package/dist/templates/basic/src/server/router/client.ts

@@ -0,0 +1,28 @@
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import type { RouterClient } from "@orpc/server";
+import { createTanstackQueryUtils, type RouterUtils } from "@orpc/tanstack-query";
+import type { AppRouter } from "./router";
+
+type ORPCClient = RouterClient<AppRouter>;
+type ORPCTanstackQueryUtils = RouterUtils<ORPCClient>;
+
+declare global {
+  var $client: ORPCClient | undefined;
+}
+
+const link = new RPCLink({
+  url: () => {
+    if (typeof window === "undefined") {
+      throw new Error("RPCLink is not allowed on the server side.");
+    }
+
+    return `${window.location.origin}/api/rpc`;
+  },
+});
+
+const client: ORPCClient = createORPCClient(link);
+
+const activeClient: ORPCClient = globalThis.$client ?? client;
+
+export const orpc: ORPCTanstackQueryUtils = createTanstackQueryUtils(activeClient);

package/dist/templates/basic/src/server/router/init.ts

@@ -0,0 +1,17 @@
+import "server-cli-only";
+
+import { os } from "@orpc/server";
+import { auth } from "../auth/init";
+import { db } from "../db/init";
+
+export type RPCContext = {
+  db: typeof db;
+  auth: typeof auth;
+  headers: Headers;
+};
+
+export const rpc = os.$context<RPCContext>();
+
+export function createContext<TExtendedContext>(context: TExtendedContext & { headers: Headers }) {
+  return { db, auth, ...context } as RPCContext & TExtendedContext;
+}

package/dist/templates/basic/src/server/router/register.ts

@@ -0,0 +1,5 @@
+import "server-only";
+
+import { caller } from "./caller";
+
+globalThis.$client ??= caller;

package/dist/templates/basic/src/server/router/router.ts

@@ -0,0 +1,8 @@
+import type { InferRouterInputs, InferRouterOutputs } from "@orpc/server";
+
+export const appRouter = {};
+
+// export type definition of API
+export type AppRouter = typeof appRouter;
+export type RouterOutputs = InferRouterOutputs<AppRouter>;
+export type RouterInputs = InferRouterInputs<AppRouter>;

package/dist/templates/basic/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "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": "react-jsx",
+    "incremental": true,
+    "declaration": false,
+    "declarationMap": false,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    "next.config.ts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/templates/code/README.md

@@ -0,0 +1 @@
+# Tulip docs

package/dist/templates/code/drizzle.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  out: "./src/server/db/migrations",
+  schema: "./src/server/db/schema.ts",
+  dialect: "postgresql",
+  casing: "snake_case",
+  dbCredentials: {
+    url: process.env.DATABASE_URL as string,
+  },
+});

package/dist/templates/code/next.config.ts

@@ -0,0 +1,30 @@
+import type { NextConfig } from "next";
+import { env } from "./src/env";
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+  partialPrefetching: true,
+  reactCompiler: true,
+  redirects: async () => {
+    return [
+      {
+        source: "/",
+        destination: "/admin",
+        permanent: true,
+      },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**.googleusercontent.com",
+      },
+    ],
+  },
+  env: {
+    NEXT_PUBLIC_HOST: env.NEXT_PUBLIC_HOST,
+  },
+};
+
+export default nextConfig;

package/dist/templates/code/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "tulip-code-template",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "license": "AGPL-3.0",
+  "engines": {
+    "node": "24.x"
+  },
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome check",
+    "format": "biome format --write",
+    "typecheck": "next typegen && tsc --noEmit",
+    "db:push": "dotenv drizzle-kit push",
+    "db:studio": "dotenv drizzle-kit studio",
+    "db:seed": "dotenv tsx src/server/db/seed.ts",
+    "auth:generate": "pnpx auth generate --config src/server/auth/init.ts --output src/server/auth/generated.ts"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^4.0.60",
+    "@aws-sdk/client-s3": "^3.1106.0",
+    "@aws-sdk/s3-request-presigner": "^3.1106.0",
+    "@better-auth/oauth-provider": "^1.6.26",
+    "@better-auth/passkey": "^1.6.26",
+    "@dnd-kit/collision": "^0.5.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/helpers": "^0.5.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/react": "^0.5.0",
+    "@hookform/resolvers": "^5.7.1",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@modelcontextprotocol/server": "^2.0.0",
+    "@openrouter/ai-sdk-provider": "^3.0.0",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/instrumentation-pg": "^0.73.0",
+    "@orpc/ai-sdk": "^1.14.15",
+    "@orpc/client": "^1.14.15",
+    "@orpc/otel": "^1.14.15",
+    "@orpc/server": "^1.14.15",
+    "@orpc/tanstack-query": "^1.14.15",
+    "@react-pdf/renderer": "^4.5.1",
+    "@t3-oss/env-nextjs": "^0.13.11",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tanstack/db": "^0.6.17",
+    "@tanstack/query-db-collection": "^1.2.1",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.9",
+    "@tulip-systems/ai": "0.11.1",
+    "@tulip-systems/app": "0.11.1",
+    "@tulip-systems/auth": "0.11.1",
+    "@tulip-systems/commands": "0.11.1",
+    "@tulip-systems/core": "0.11.1",
+    "@tulip-systems/data-tables": "0.11.1",
+    "@tulip-systems/drive": "0.11.1",
+    "@tulip-systems/drive-google": "0.11.1",
+    "@tulip-systems/editor": "0.11.1",
+    "@tulip-systems/inline": "0.11.1",
+    "@tulip-systems/query": "0.11.1",
+    "@tulip-systems/storage": "0.11.1",
+    "@tulip-systems/ui": "0.11.1",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@vercel/functions": "^3.9.0",
+    "@vercel/otel": "^2.1.3",
+    "ai": "^7.0.57",
+    "better-auth": "^1.6.26",
+    "class-variance-authority": "^0.7.1",
+    "client-only": "^0.0.1",
+    "date-fns": "^4.4.0",
+    "drizzle-orm": "^0.45.2",
+    "drizzle-seed": "^0.3.1",
+    "drizzle-zod": "^0.8.3",
+    "fast-deep-equal": "^3.1.3",
+    "googleapis": "^174.0.1",
+    "jotai": "^2.20.2",
+    "lodash.throttle": "^4.1.1",
+    "lucide-react": "^1.30.0",
+    "mcp-handler": "^2.1.0",
+    "motion": "^13.0.0",
+    "next": "16.3.0",
+    "nuqs": "2.9.5",
+    "pg": "8.22.0",
+    "postgres": "^3.4.9",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "^7.84.0",
+    "react-markdown": "^10.1.0",
+    "react-pdf-tailwind": "^3.0.0",
+    "recharts": "3.10.1",
+    "resend": "^6.18.1",
+    "sharp": "^0.35.3",
+    "server-only": "^0.0.1",
+    "usehooks-ts": "^3.1.1",
+    "uuid": "^14.0.1",
+    "xlsx": "^0.18.5",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^10.5.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/lodash.throttle": "^4.1.9",
+    "@types/node": "^26.2.0",
+    "@types/pg": "^8.21.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "dotenv-cli": "^11.0.0",
+    "drizzle-kit": "^0.31.10",
+    "postcss": "^8.5.26",
+    "server-cli-only": "^0.3.2",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.11",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3"
+  }
+}

package/dist/templates/code/postcss.config.js

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

package/dist/templates/code/src/app/.well-known/oauth-authorization-server/route.ts

@@ -0,0 +1,4 @@
+import { oauthProviderAuthServerMetadata } from "@better-auth/oauth-provider";
+import { auth } from "@/server/auth/init";
+
+export const GET = oauthProviderAuthServerMetadata(auth);

package/dist/templates/code/src/app/.well-known/oauth-protected-resource/[...rest]/route.ts

@@ -0,0 +1 @@
+export { GET, OPTIONS } from "../route";

package/dist/templates/code/src/app/.well-known/oauth-protected-resource/route.ts

@@ -0,0 +1,34 @@
+import type { NextRequest } from "next/server";
+import { authServerClient } from "@/server/auth/client.server";
+
+/**
+ * This endpoint returns metadata about the protected resource specified by the [resource-path] parameter.
+ * The metadata is retrieved from the authorization server specified in the request.
+ */
+export async function GET(req: NextRequest) {
+  const resourceURL = new URL("/api/mcp", req.url).toString();
+  const authServerURL = new URL("/api/auth", req.url).toString();
+
+  const metadata = await authServerClient.getProtectedResourceMetadata({
+    resource: resourceURL,
+    authorization_servers: [authServerURL],
+  });
+
+  return new Response(JSON.stringify(metadata), {
+    headers: {
+      "Content-Type": "application/json",
+      "Cache-Control": "public, max-age=15, stale-while-revalidate=15, stale-if-error=86400",
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, OPTIONS",
+    },
+  });
+}
+
+export async function OPTIONS() {
+  return new Response(null, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, OPTIONS",
+    },
+  });
+}

package/dist/templates/code/src/app/.well-known/openid-configuration/route.ts

@@ -0,0 +1,4 @@
+import { oauthProviderOpenIdConfigMetadata } from "@better-auth/oauth-provider";
+import { auth } from "@/server/auth/init";
+
+export const GET = oauthProviderOpenIdConfigMetadata(auth);

package/dist/templates/code/src/app/admin/(dashboard)/_components/budget-bar-chart.client.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { formatCurrency } from "@tulip-systems/core";
+import { Button } from "@tulip-systems/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@tulip-systems/ui/recharts";
+import { ChevronDownIcon } from "lucide-react";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useState } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { orpc } from "@/server/router/client";
+import { DateYearPicker } from "./date-year-picker";
+
+const chartConfig = {
+  budget: {
+    label: "Budget",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export function BudgetBarChart() {
+  const [open, setOpen] = useState(false);
+  const [year, setYear] = useQueryState(
+    "year",
+    parseAsInteger.withDefault(new Date().getFullYear()),
+  );
+
+  const { data } = useSuspenseQuery(
+    orpc.projects.getBudgetByMonth.queryOptions({
+      input: { year },
+      select: (data) => {
+        if (data.length === 0) return null;
+
+        const budgetMap = new Map(data.map((item) => [item.month.trim(), item.budget]));
+
+        return MONTHS.map((month) => ({
+          month,
+          budget: budgetMap.get(month) ?? 0,
+        }));
+      },
+    }),
+  );
+
+  return (
+    <Card>
+      <CardHeader className="flex w-full flex-row flex-wrap items-center justify-between">
+        <CardTitle>Budget</CardTitle>
+
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="w-36 justify-between font-normal">
+              {year ? year : "Selecteer jaar"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="mx-10 w-auto overflow-hidden p-0" align="start">
+            <DateYearPicker
+              year={new Date(year, 0, 1)}
+              onYearChange={(date) => {
+                if (!date) return;
+
+                setYear(date.getFullYear());
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+
+      <CardContent className="px-2">
+        <div className="h-80 w-full">
+          {data ? (
+            <ChartContainer config={chartConfig} className="h-80 w-full">
+              <BarChart accessibilityLayer data={data}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => value.slice(0, 3)}
+                  interval={0}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                  className="md:angle-0 text-xs md:text-sm"
+                />
+                <YAxis
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(value) => `€${(value / 1000).toFixed(0)}k`}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      indicator="dashed"
+                      formatter={(value) => formatCurrency(Number(value))}
+                    />
+                  }
+                />
+                <Bar dataKey="budget" fill="var(--color-budget)" radius={4} />
+              </BarChart>
+            </ChartContainer>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <p className="text-muted-foreground">{year} heeft nog geen budget</p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/dist/templates/code/src/app/admin/(dashboard)/_components/date-year-picker.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@tulip-systems/ui/button";
+
+interface DateYearPickerProps {
+  year?: Date;
+  onYearChange: (year: Date | undefined) => void;
+}
+
+export function DateYearPicker({ year, onYearChange }: DateYearPickerProps) {
+  const currentYear = year?.getFullYear() || new Date().getFullYear();
+
+  const years = Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
+
+  return (
+    <div className="w-auto p-4">
+      <div className="grid grid-cols-3 gap-2 pb-5">
+        {years.map((y) => (
+          <Button
+            key={y}
+            variant={y === currentYear ? "default" : "ghost"}
+            size="sm"
+            onClick={() => {
+              const newDate = new Date(year || new Date());
+              newDate.setFullYear(y);
+              newDate.setHours(12, 0, 0, 0);
+              onYearChange(newDate);
+            }}
+          >
+            {y}
+          </Button>
+        ))}
+      </div>
+      <div className="flex w-full justify-center border-t p-3">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            const today = new Date();
+            today.setHours(12, 0, 0, 0);
+            onYearChange(today);
+          }}
+        >
+          Dit jaar
+        </Button>
+      </div>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/(dashboard)/layout.tsx

@@ -0,0 +1,16 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Dashboard" }]} />
+        </Topbar>
+      </Header>
+
+      {props.children}
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/(dashboard)/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-5 p-content">
+      <div className="grid @4xl/admin:grid-cols-2 @6xl/admin:grid-cols-3 grid-rows-1 gap-5">
+        <Skeleton className="h-80" />
+        <Skeleton className="h-80" />
+        <Skeleton className="h-80" />
+      </div>
+
+      <Skeleton className="h-80" />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/(dashboard)/page.tsx

@@ -0,0 +1,12 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { BudgetBarChart } from "./_components/budget-bar-chart.client";
+
+export default function Page() {
+  return (
+    <div className="space-y-5 p-content">
+      <Allowed permission={{ dashboard: ["view.budget"] }}>
+        <BudgetBarChart />
+      </Allowed>
+    </div>
+  );
+}