@pylonsync/create-pylon 0.3.51 → 0.3.54

package/templates/web/b2b/apps/web/src/app/components/OrgPicker.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button, Input, Card, CardHeader, CardContent } from "@__APP_NAME_KEBAB__/ui";
+
+type Org = {
+	id: string;
+	slug: string;
+	name: string;
+	role: string;
+	createdAt: string;
+};
+
+export function OrgPicker({ initialOrgs }: { initialOrgs: Org[] }) {
+	const [orgs, setOrgs] = useState(initialOrgs);
+	const [activeId, setActiveId] = useState<string | null>(
+		initialOrgs[0]?.id ?? null,
+	);
+	const [creating, setCreating] = useState(false);
+	const [name, setName] = useState("");
+	const [slug, setSlug] = useState("");
+	const [pending, startTransition] = useTransition();
+	const [error, setError] = useState<string | null>(null);
+
+	async function create(e: React.FormEvent) {
+		e.preventDefault();
+		setError(null);
+		startTransition(async () => {
+			const res = await fetch("/api/fn/createOrg", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ slug, name }),
+			});
+			if (res.ok) {
+				const org = (await res.json()) as Org;
+				setOrgs((prev) => [
+					{ ...org, role: "owner" },
+					...prev,
+				]);
+				setActiveId(org.id);
+				setName("");
+				setSlug("");
+				setCreating(false);
+			} else {
+				const body = await res.json().catch(() => ({}));
+				setError(body?.message ?? "create failed");
+			}
+		});
+	}
+
+	const active = orgs.find((o) => o.id === activeId) ?? null;
+
+	return (
+		<div className="space-y-6">
+			<Card>
+				<CardHeader>
+					<div className="flex items-center justify-between">
+						<h2 className="text-sm font-medium">Your organizations</h2>
+						<Button
+							size="sm"
+							variant={creating ? "ghost" : "default"}
+							onClick={() => setCreating((v) => !v)}
+						>
+							{creating ? "Cancel" : "New org"}
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent>
+					{creating && (
+						<form onSubmit={create} className="grid grid-cols-2 gap-2 mb-4">
+							<Input
+								placeholder="Org name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								disabled={pending}
+								required
+							/>
+							<Input
+								placeholder="acme-corp"
+								value={slug}
+								onChange={(e) => setSlug(e.target.value.toLowerCase())}
+								disabled={pending}
+								pattern="[a-z0-9][a-z0-9-]{1,30}[a-z0-9]"
+								required
+							/>
+							<Button
+								type="submit"
+								variant="primary"
+								disabled={pending || !name.trim() || !slug.trim()}
+								className="col-span-2"
+							>
+								{pending ? "Creating…" : "Create org"}
+							</Button>
+							{error && (
+								<p className="text-xs text-red-500 col-span-2">{error}</p>
+							)}
+						</form>
+					)}
+
+					{orgs.length === 0 ? (
+						<p className="text-sm text-neutral-500 py-2">
+							You&apos;re not in any orgs yet. Create one above to get started.
+						</p>
+					) : (
+						<ul className="divide-y divide-neutral-200 dark:divide-neutral-800 -mx-5">
+							{orgs.map((o) => (
+								<li
+									key={o.id}
+									className="flex items-center justify-between px-5 py-2.5 cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900"
+									data-active={o.id === activeId || undefined}
+									onClick={() => setActiveId(o.id)}
+								>
+									<div>
+										<div className="text-sm font-medium">{o.name}</div>
+										<div className="text-xs text-neutral-400 font-mono">
+											{o.slug}
+										</div>
+									</div>
+									<span
+										className={`text-xs font-mono uppercase tracking-wide px-2 py-0.5 rounded ${
+											o.role === "owner"
+												? "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300"
+												: o.role === "admin"
+													? "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300"
+													: "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+										}`}
+									>
+										{o.role}
+									</span>
+								</li>
+							))}
+						</ul>
+					)}
+				</CardContent>
+			</Card>
+
+			{active && <OrgDetail org={active} />}
+		</div>
+	);
+}
+
+function OrgDetail({ org }: { org: Org }) {
+	return (
+		<Card>
+			<CardHeader>
+				<div className="flex items-baseline justify-between">
+					<h2 className="text-sm font-medium">
+						{org.name}{" "}
+						<span className="text-xs text-neutral-400 font-mono ml-1">
+							/{org.slug}
+						</span>
+					</h2>
+					<span className="text-xs text-neutral-500">your role: {org.role}</span>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<p className="text-sm text-neutral-500">
+					Wire member management and project lists into this panel by calling
+					<code className="font-mono text-xs mx-1">/api/fn/orgMembers</code>
+					and
+					<code className="font-mono text-xs mx-1">/api/fn/orgProjects</code>
+					with this org&apos;s id. Both queries enforce membership; you only
+					see what your role allows.
+				</p>
+				<div className="text-xs font-mono text-neutral-400">
+					orgId: {org.id}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

package/templates/web/b2b/apps/web/src/app/globals.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";
+
+:root { color-scheme: light dark; }
+html, body { height: 100%; }
+body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }

package/templates/web/b2b/apps/web/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+	title: "__APP_NAME__",
+	description: "Multi-tenant SaaS scaffold powered by Pylon",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body className="antialiased min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+				{children}
+			</body>
+		</html>
+	);
+}

package/templates/web/b2b/apps/web/src/app/page.tsx

@@ -0,0 +1,39 @@
+import { pylon } from "@/lib/pylon";
+import { OrgPicker } from "./components/OrgPicker";
+
+export const dynamic = "force-dynamic";
+
+type Org = {
+	id: string;
+	slug: string;
+	name: string;
+	role: string;
+	createdAt: string;
+};
+
+export default async function HomePage() {
+	const orgs = await pylon
+		.json<Org[]>("/api/fn/myOrgs", {
+			method: "POST",
+			body: "{}",
+			headers: { "Content-Type": "application/json" },
+		})
+		.catch(() => [] as Org[]);
+
+	return (
+		<main className="mx-auto max-w-3xl px-6 py-12 space-y-8">
+			<header className="space-y-2">
+				<h1 className="text-3xl font-semibold tracking-tight">__APP_NAME__</h1>
+				<p className="text-sm text-neutral-500 dark:text-neutral-400">
+					Multi-tenant SaaS scaffold. Pick an org to manage its members and
+					projects, or create a new one. Tenant isolation is enforced
+					server-side by Pylon row-level policies — clients can&apos;t leak
+					data across orgs even if they fabricate <code className="font-mono text-xs">orgId</code>{" "}
+					in a request.
+				</p>
+			</header>
+
+			<OrgPicker initialOrgs={orgs} />
+		</main>
+	);
+}

package/templates/web/b2b/apps/web/src/lib/pylon.ts

@@ -0,0 +1,5 @@
+import { createPylonServer } from "@pylonsync/next/server";
+
+export const pylon = createPylonServer({
+	cookieName: "__APP_NAME_SNAKE___session",
+});

package/templates/web/b2b/apps/web/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/web/barebones/apps/web/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/templates/web/barebones/apps/web/next.config.ts

@@ -0,0 +1,40 @@
+import type { NextConfig } from "next";
+
+/**
+ * Pylon's typed client + functions packages re-export across the
+ * server/client boundary AND the workspace UI package ships TSX.
+ * `transpilePackages` makes Next bundle them cleanly.
+ *
+ * `rewrites` proxies every Pylon-owned path (`/api/fn/*`,
+ * `/api/auth/*`, `/api/sync/*`, …) to the Pylon binary running on
+ * `PYLON_API_URL` (default http://localhost:4321). Without this,
+ * Next.js sees `/api/fn/createWidget` as a missing route and 404s
+ * before the request reaches Pylon.
+ *
+ * In production set `PYLON_API_URL` to wherever you've deployed the
+ * Pylon binary (Fly, Render, Railway, your own box). The browser
+ * still hits same-origin paths under your Next deployment, and Next
+ * forwards them server-side — no CORS, no extra DNS.
+ */
+const PYLON_API_URL = process.env.PYLON_API_URL ?? "http://localhost:4321";
+
+const config: NextConfig = {
+	transpilePackages: [
+		"@__APP_NAME_KEBAB__/ui",
+		"@pylonsync/sdk",
+		"@pylonsync/react",
+		"@pylonsync/next",
+		"@pylonsync/functions",
+		"@pylonsync/sync",
+	],
+	async rewrites() {
+		return [
+			{ source: "/api/fn/:path*", destination: `${PYLON_API_URL}/api/fn/:path*` },
+			{ source: "/api/auth/:path*", destination: `${PYLON_API_URL}/api/auth/:path*` },
+			{ source: "/api/sync/:path*", destination: `${PYLON_API_URL}/api/sync/:path*` },
+			{ source: "/api/:path*", destination: `${PYLON_API_URL}/api/:path*` },
+		];
+	},
+};
+
+export default config;

package/templates/web/barebones/apps/web/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@__APP_NAME_KEBAB__/web",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@__APP_NAME_KEBAB__/ui": "__WORKSPACE_DEP__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/next": "^__PYLON_VERSION__",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/web/barebones/apps/web/postcss.config.mjs

@@ -0,0 +1,4 @@
+/** Tailwind v4 PostCSS pipeline. */
+export default {
+	plugins: { "@tailwindcss/postcss": {} },
+};

package/templates/web/barebones/apps/web/src/app/components/WidgetList.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button, Input } from "@__APP_NAME_KEBAB__/ui";
+
+type Widget = {
+	id: string;
+	name: string;
+	count: number;
+	createdAt: string;
+};
+
+export function WidgetList({ initialWidgets }: { initialWidgets: Widget[] }) {
+	const [widgets, setWidgets] = useState(initialWidgets);
+	const [name, setName] = useState("");
+	const [pending, startTransition] = useTransition();
+
+	async function add() {
+		const trimmed = name.trim();
+		if (!trimmed) return;
+		setName("");
+		startTransition(async () => {
+			const res = await fetch("/api/fn/createWidget", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name: trimmed }),
+			});
+			if (res.ok) {
+				const widget = (await res.json()) as Widget;
+				setWidgets((prev) => [widget, ...prev]);
+			}
+		});
+	}
+
+	return (
+		<div className="space-y-4">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					add();
+				}}
+				className="flex gap-2"
+			>
+				<Input
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					placeholder="Name a widget…"
+					disabled={pending}
+					className="flex-1"
+				/>
+				<Button
+					type="submit"
+					variant="primary"
+					disabled={pending || !name.trim()}
+				>
+					Create
+				</Button>
+			</form>
+
+			{widgets.length === 0 ? (
+				<p className="text-sm text-neutral-500 dark:text-neutral-400 text-center py-8">
+					No widgets yet. Create one above.
+				</p>
+			) : (
+				<ul className="divide-y divide-neutral-200 dark:divide-neutral-800 rounded-md border border-neutral-200 dark:border-neutral-800">
+					{widgets.map((w) => (
+						<li
+							key={w.id}
+							className="flex items-center justify-between gap-3 px-4 py-3 text-sm bg-white dark:bg-neutral-950"
+						>
+							<span className="font-medium">{w.name}</span>
+							<span className="font-mono text-xs text-neutral-400">
+								count: {w.count}
+							</span>
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+}

package/templates/web/barebones/apps/web/src/app/globals.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";
+
+:root {
+	color-scheme: light dark;
+}
+
+html, body { height: 100%; }
+body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }

package/templates/web/barebones/apps/web/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+	title: "__APP_NAME__",
+	description: "Realtime app powered by Pylon",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body className="antialiased min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+				{children}
+			</body>
+		</html>
+	);
+}

package/templates/web/barebones/apps/web/src/app/page.tsx

@@ -0,0 +1,43 @@
+import { pylon } from "@/lib/pylon";
+import { WidgetList } from "./components/WidgetList";
+
+// Force dynamic — every render reads the live widget list from Pylon.
+export const dynamic = "force-dynamic";
+
+type Widget = {
+	id: string;
+	name: string;
+	count: number;
+	createdAt: string;
+};
+
+export default async function HomePage() {
+	const widgets = await pylon
+		.json<Widget[]>("/api/fn/listWidgets", {
+			method: "POST",
+			body: "{}",
+			headers: { "Content-Type": "application/json" },
+		})
+		.catch(() => [] as Widget[]);
+
+	return (
+		<main className="mx-auto max-w-2xl px-6 py-12 space-y-8">
+			<header className="space-y-2">
+				<h1 className="text-3xl font-semibold tracking-tight">__APP_NAME__</h1>
+				<p className="text-sm text-neutral-500 dark:text-neutral-400">
+					A bare-bones Pylon app. Edit{" "}
+					<code className="font-mono text-xs">apps/api/schema.ts</code> to
+					change the data model,{" "}
+					<code className="font-mono text-xs">apps/api/functions/</code> to
+					add handlers, or{" "}
+					<code className="font-mono text-xs">
+						apps/web/src/app/components/WidgetList.tsx
+					</code>{" "}
+					for the UI.
+				</p>
+			</header>
+
+			<WidgetList initialWidgets={widgets} />
+		</main>
+	);
+}

package/templates/web/barebones/apps/web/src/lib/pylon.ts

@@ -0,0 +1,14 @@
+import { createPylonServer } from "@pylonsync/next/server";
+
+/**
+ * Single server-helper instance. Imported by every Server Component
+ * and Server Action that needs to talk to the Pylon control plane.
+ *
+ * `cookieName` MUST match the backend's emitted cookie. Pylon uses
+ * `${app_name}_session` from the manifest — for this app that's
+ * `__APP_NAME_SNAKE___session`. Pin it in code (NOT env) so a bad
+ * deployment env can't silently break auth.
+ */
+export const pylon = createPylonServer({
+	cookieName: "__APP_NAME_SNAKE___session",
+});

package/templates/web/barebones/apps/web/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/web/chat/apps/web/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/templates/web/chat/apps/web/next.config.ts

@@ -0,0 +1,24 @@
+import type { NextConfig } from "next";
+
+const PYLON_API_URL = process.env.PYLON_API_URL ?? "http://localhost:4321";
+
+const config: NextConfig = {
+	transpilePackages: [
+		"@__APP_NAME_KEBAB__/ui",
+		"@pylonsync/sdk",
+		"@pylonsync/react",
+		"@pylonsync/next",
+		"@pylonsync/functions",
+		"@pylonsync/sync",
+	],
+	async rewrites() {
+		return [
+			{ source: "/api/fn/:path*", destination: `${PYLON_API_URL}/api/fn/:path*` },
+			{ source: "/api/auth/:path*", destination: `${PYLON_API_URL}/api/auth/:path*` },
+			{ source: "/api/sync/:path*", destination: `${PYLON_API_URL}/api/sync/:path*` },
+			{ source: "/api/:path*", destination: `${PYLON_API_URL}/api/:path*` },
+		];
+	},
+};
+
+export default config;

package/templates/web/chat/apps/web/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@__APP_NAME_KEBAB__/web",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@__APP_NAME_KEBAB__/ui": "__WORKSPACE_DEP__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/next": "^__PYLON_VERSION__",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/web/chat/apps/web/postcss.config.mjs

@@ -0,0 +1,3 @@
+export default {
+	plugins: { "@tailwindcss/postcss": {} },
+};