@flaredev/cli 0.1.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@flaredev/cli",
+  "version": "0.1.0",
+  "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
+  "license": "MIT",
+  "author": "Muke Johnbaptist",
+  "homepage": "https://flare-docs.codetotech.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MUKE-coder/flare-framework.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/MUKE-coder/flare-framework/issues"
+  },
+  "keywords": [
+    "cloudflare",
+    "workers",
+    "vinext",
+    "fullstack",
+    "framework",
+    "d1",
+    "drizzle",
+    "generator",
+    "admin",
+    "cli"
+  ],
+  "type": "module",
+  "bin": {
+    "flare": "./bin/flare.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "dependencies": {
+    "cac": "^7.0.0",
+    "jiti": "^2.7.0",
+    "jsonc-parser": "^3.3.1",
+    "picocolors": "^1.1.1",
+    "@flaredev/core": "0.1.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/templates/app/.dev.vars.example

@@ -0,0 +1,13 @@
+# Local secrets for `vinext dev` / `wrangler dev`. Copy to .dev.vars (git-ignored).
+# In production set them with `wrangler secret put <NAME>`.
+
+# Signs sessions, tokens, and storage URLs. Generate with: openssl rand -base64 32
+BETTER_AUTH_SECRET=
+
+# Only needed on a custom domain, e.g. https://example.com
+# BETTER_AUTH_URL=
+
+# Resend (https://resend.com/api-keys). Leave empty locally to print emails to the console.
+RESEND_API_KEY=
+# Sender on a domain verified in Resend, e.g. "Acme <hello@acme.com>"
+MAIL_FROM=

package/templates/app/README.md

@@ -0,0 +1,9 @@
+# __APP_NAME__
+
+A [Flare](https://github.com/) app running on Cloudflare Workers via vinext.
+
+```bash
+__PM__ run dev      # start the dev server
+__PM__ run build    # production build
+__PM__ run deploy   # build and deploy to Cloudflare Workers
+```

package/templates/app/_gitignore

@@ -0,0 +1,10 @@
+node_modules
+.env*
+!.env.example
+.dev.vars*
+!.dev.vars.example
+.next
+next-env.d.ts
+/dist/
+.vinext/
+.wrangler/

package/templates/app/app/admin/actions.ts

@@ -0,0 +1,113 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { createObjectKey, fileKeyPrefix, fileMaxBytes, matchesContentType, mimeTypesFor, type FileField } from "@flaredev/core";
+import type { FieldIssue } from "@flaredev/core/server";
+import { storage } from "@/lib/storage";
+import { can, type PolicyAction } from "@flaredev/core";
+import { adminPath, adminSession, adminStore, policyFor } from "@/lib/admin";
+
+export type ActionResult<T = unknown> =
+  | { ok: true; data: T }
+  | { ok: false; status: number; error: string; issues?: FieldIssue[]; field?: string };
+
+const forbidden = (message = "You don't have access to the admin."): ActionResult<never> => ({ ok: false, status: 403, error: message });
+
+/** Session + policy check for one action on one resource. */
+async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
+  const { allowed: inAdmin, role } = await adminSession();
+  if (!inAdmin) return forbidden();
+  if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
+}
+
+export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
+  const denied = await allowed(resourceName, "delete");
+  if (denied) return denied;
+
+  const store = adminStore(resourceName);
+  const result = await store.delete(id);
+  if (result.ok) revalidatePath(adminPath(store.resource));
+  return result;
+}
+
+export async function createRecordAction(resourceName: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
+  const denied = await allowed(resourceName, "create");
+  if (denied) return denied;
+
+  const store = adminStore(resourceName);
+  const result = await store.create(input);
+  if (result.ok) revalidatePath(adminPath(store.resource));
+  return result;
+}
+
+export async function updateRecordAction(resourceName: string, id: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
+  const denied = await allowed(resourceName, "update");
+  if (denied) return denied;
+
+  const store = adminStore(resourceName);
+  const result = await store.update(id, input);
+  if (result.ok) revalidatePath(adminPath(store.resource));
+  return result;
+}
+
+/** The file field `fieldKey` of a resource, or a failure when it doesn't exist. */
+function fileField(
+  resourceName: string,
+  fieldKey: string,
+): { failure: ActionResult<never> } | { field: FileField & { label: string }; prefix: string } {
+  const { resource } = adminStore(resourceName);
+  const field = resource.fields[fieldKey];
+  if (!field || field.kind !== "file") {
+    return { failure: { ok: false, status: 400, error: `${resourceName} has no file field "${fieldKey}".` } };
+  }
+  return { field, prefix: fileKeyPrefix(resource, fieldKey) };
+}
+
+/**
+ * A short-lived signed URL for uploading to a `file:[…]` field. The declared type and
+ * size are checked against the descriptor before signing, so a browser can't widen
+ * what the field accepts; the storage route then checks the bytes really are that type.
+ */
+export async function createUploadUrlAction(
+  resourceName: string,
+  fieldKey: string,
+  file: { name: string; type: string; size: number },
+): Promise<ActionResult<{ url: string; key: string }>> {
+  // Uploading is part of creating or editing a record, so either permission is enough.
+  const deniedCreate = await allowed(resourceName, "create");
+  const deniedUpdate = await allowed(resourceName, "update");
+  if (deniedCreate && deniedUpdate) return deniedUpdate;
+
+  const target = fileField(resourceName, fieldKey);
+  if ("failure" in target) return target.failure;
+  const { field, prefix } = target;
+
+  const contentTypes = mimeTypesFor(field.accept);
+  if (!matchesContentType(file.type || "application/octet-stream", contentTypes)) {
+    return { ok: false, status: 415, error: `${field.label} accepts ${field.accept.join(", ")} files.`, field: fieldKey };
+  }
+  const maxBytes = fileMaxBytes(field);
+  if (file.size > maxBytes) {
+    return { ok: false, status: 413, error: `${field.label} must be ${Math.round(maxBytes / 1024 / 1024)} MB or smaller.`, field: fieldKey };
+  }
+
+  const upload = await storage.createUploadUrl({ key: createObjectKey(file.name, prefix), contentTypes, maxBytes });
+  return { ok: true, data: { url: upload.url, key: upload.key } };
+}
+
+/**
+ * A short-lived URL for viewing a file stored in a `file:[…]` field. Only keys under that
+ * field's prefix are signed, and only for roles that can work with the resource, so a
+ * guessed or borrowed key can't be read through a resource the role can't see.
+ */
+export async function createReadUrlAction(resourceName: string, fieldKey: string, key: string): Promise<ActionResult<{ url: string }>> {
+  const denied = await allowed(resourceName, "read");
+  // Someone creating or editing a record can view what they just uploaded.
+  if (denied && (await allowed(resourceName, "create")) && (await allowed(resourceName, "update"))) return denied;
+
+  const target = fileField(resourceName, fieldKey);
+  if ("failure" in target) return target.failure;
+  if (!key.startsWith(target.prefix)) return { ok: false, status: 403, error: "That file doesn't belong to this field.", field: fieldKey };
+
+  return { ok: true, data: { url: await storage.createReadUrl({ key }) } };
+}

package/templates/app/app/admin/layout.tsx

@@ -0,0 +1,32 @@
+import { cookies } from "next/headers";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { AdminHeader, type Theme } from "@/components/admin/admin-header";
+import { ResourceNav } from "@/components/admin/resource-nav";
+import { adminLinks } from "@/lib/admin-nav";
+import { requireAdmin, visibleResources } from "@/lib/admin";
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const { session } = await requireAdmin();
+  const jar = await cookies();
+  const theme = (jar.get("flare-theme")?.value ?? "system") as Theme;
+  const collapsed = jar.get("sidebar_state")?.value === "false";
+
+  const resources = (await visibleResources()).map((resource) => ({
+    name: resource.name,
+    pluralLabel: resource.pluralLabel,
+    slug: resource.slug,
+    icon: resource.icon,
+  }));
+
+  return (
+    <SidebarProvider defaultOpen={!collapsed}>
+      <ResourceNav appName="__APP_NAME__" resources={resources} links={adminLinks} />
+      <SidebarInset>
+        <AdminHeader user={{ name: session.user.name, email: session.user.email }} initialTheme={theme} />
+        <main className="flex-1 p-6 md:p-8">{children}</main>
+      </SidebarInset>
+      <Toaster theme={theme} />
+    </SidebarProvider>
+  );
+}

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

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import { ArrowRightIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { resourceIcon } from "@/components/admin/resource-icon";
+import { adminPath, recordCount, visibleResources } from "@/lib/admin";
+
+/** Admin landing page: one card per resource with its record count. */
+export default async function AdminPage() {
+  const resources = await visibleResources();
+  const counts = await Promise.all(resources.map((resource) => recordCount(resource.name)));
+
+  if (resources.length === 0) {
+    return (
+      <Empty className="rounded-lg border border-dashed">
+        <EmptyHeader>
+          <EmptyTitle>No resources yet</EmptyTitle>
+          <EmptyDescription>
+            Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <h1 className="text-2xl font-semibold">Overview</h1>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {resources.map((resource, index) => {
+          const Icon = resourceIcon(resource.icon);
+          return (
+            <Card key={resource.name}>
+              <CardHeader>
+                <CardDescription className="flex items-center gap-2">
+                  <Icon className="size-5" />
+                  {resource.pluralLabel}
+                </CardDescription>
+                <CardTitle className="text-3xl font-bold tabular-nums">{counts[index]!.toLocaleString()}</CardTitle>
+                <CardAction>
+                  <Button variant="ghost" size="icon" aria-label={`New ${resource.label.toLowerCase()}`} asChild>
+                    <Link href={adminPath(resource, "new")}>
+                      <PlusIcon />
+                    </Link>
+                  </Button>
+                </CardAction>
+              </CardHeader>
+              <CardContent>
+                <Button variant="link" className="h-auto p-0" asChild>
+                  <Link href={adminPath(resource)}>
+                    View {resource.pluralLabel.toLowerCase()}
+                    <ArrowRightIcon data-icon="inline-end" />
+                  </Link>
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/app/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from "better-auth/next-js";
+import { auth } from "@/lib/auth";
+
+export const { GET, POST } = toNextJsHandler(auth);

package/templates/app/app/api/health/route.ts

@@ -0,0 +1,7 @@
+import { sql } from "drizzle-orm";
+import { getDb } from "@/db";
+
+export async function GET() {
+  const [row] = await getDb().all<{ ok: number }>(sql`select 1 as ok`);
+  return Response.json({ ok: true, database: row?.ok === 1 });
+}

package/templates/app/app/api/storage/route.ts

@@ -0,0 +1,6 @@
+import { storage } from "@/lib/storage";
+
+// Redeems signed URLs from lib/storage.ts: PUT uploads, GET/HEAD reads.
+export const GET = (request: Request) => storage.handleRequest(request);
+export const HEAD = GET;
+export const PUT = GET;

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

@@ -0,0 +1,18 @@
+import { SignOutButton } from "@/components/sign-out-button";
+import { requireSession } from "@/lib/session";
+
+export default async function DashboardPage() {
+  const { user } = await requireSession("/dashboard");
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">Dashboard</h1>
+        <SignOutButton />
+      </div>
+      <p className="text-sm text-[var(--foreground-muted)]">
+        Signed in as <span className="font-medium text-[var(--foreground)]">{user.email}</span>
+      </p>
+    </main>
+  );
+}

package/templates/app/app/globals.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/*
+ * Dark mode: the `dark` class on <html> (set from the theme cookie) or, with no
+ * explicit choice, the system preference. `light` forces light.
+ */
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light, .light *)) {
+      @slot;
+    }
+  }
+}
+
+/*
+ * Design tokens (style-guide.md). Edit these to reskin the app; the shadcn/ui
+ * tokens below are derived from them. Note: the style guide's "accent" (primary
+ * buttons, active nav) is shadcn's --primary; shadcn's --accent is the hover surface.
+ */
+:root {
+  --background: #ffffff;
+  --surface: #ffffff;
+  --surface-muted: #f7f7f8;
+  --border: #e5e5e7;
+  --foreground: #0a0a0a;
+  --foreground-muted: #6b7280;
+  --success: #16a34a;
+  --danger: #dc2626;
+  --warning: #d97706;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --surface: #111111;
+  --surface-muted: #18181b;
+  --border: #27272a;
+  --foreground: #fafafa;
+  --foreground-muted: #9ca3af;
+  --success: #22c55e;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: #0a0a0a;
+    --surface: #111111;
+    --surface-muted: #18181b;
+    --border: #27272a;
+    --foreground: #fafafa;
+    --foreground-muted: #9ca3af;
+    --success: #22c55e;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+  }
+}
+
+:root {
+  color-scheme: light;
+  --card: var(--surface);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface);
+  --popover-foreground: var(--foreground);
+  --primary: var(--foreground);
+  --primary-foreground: var(--background);
+  --secondary: var(--surface-muted);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-muted);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-muted);
+  --accent-foreground: var(--foreground);
+  --destructive: var(--danger);
+  --input: var(--border);
+  --ring: var(--foreground-muted);
+  --chart-1: var(--foreground);
+  --chart-2: #71717a;
+  --chart-3: #a1a1aa;
+  --chart-4: #d4d4d8;
+  --chart-5: var(--success);
+  --sidebar: var(--surface-muted);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--foreground);
+  --sidebar-primary-foreground: var(--background);
+  --sidebar-accent: color-mix(in oklab, var(--foreground) 6%, var(--surface-muted));
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--foreground-muted);
+}
+
+.dark {
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    color-scheme: dark;
+  }
+}
+
+@theme inline {
+  --font-sans: ui-sans-serif, -apple-system, "Inter", "Segoe UI", sans-serif;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
+  --color-surface-muted: var(--surface-muted);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-success: var(--success);
+  --color-danger: var(--danger);
+  --color-warning: var(--warning);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+}

package/templates/app/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "__APP_NAME__",
+  description: "Built with Flare",
+};
+
+/**
+ * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
+ * first paint. It runs in the browser rather than reading cookies() here: a layout
+ * that reads cookies makes every page under it dynamic, and dynamic pages can never
+ * be served from the CDN cache.
+ */
+const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/app/app/page.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col justify-center gap-4 p-8">
+      <p className="text-sm font-medium text-[var(--foreground-muted)]">Flare</p>
+      <h1 className="text-2xl font-semibold">__APP_NAME__</h1>
+      <p className="text-sm text-[var(--foreground-muted)]">
+        Edit <code>app/page.tsx</code> to get started, or generate a resource with{" "}
+        <code>flare gen resource</code>.
+      </p>
+      <nav className="flex gap-3 text-sm font-medium">
+        <Link href="/sign-in" className="underline">Sign in</Link>
+        <Link href="/sign-up" className="underline">Sign up</Link>
+        <Link href="/dashboard" className="underline">Dashboard</Link>
+      </nav>
+    </main>
+  );
+}

package/templates/app/app/sign-in/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthForm } from "@/components/auth-form";
+import { enabledSocialProviders } from "@/lib/auth";
+import { getSession, safeRedirectPath } from "@/lib/session";
+
+export default async function SignInPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ next?: string; error?: string }>;
+}) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 p-6">
+      <h1 className="text-2xl font-semibold">Sign in</h1>
+      <AuthForm
+        mode="sign-in"
+        next={next}
+        socialProviders={enabledSocialProviders()}
+        initialError={params.error ? "Sign-in with that provider failed. Please try again." : null}
+      />
+      <p className="text-sm text-[var(--foreground-muted)]">
+        No account?{" "}
+        <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-[var(--foreground)] underline">
+          Create one
+        </Link>
+      </p>
+    </main>
+  );
+}

package/templates/app/app/sign-up/page.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthForm } from "@/components/auth-form";
+import { enabledSocialProviders } from "@/lib/auth";
+import { getSession, safeRedirectPath } from "@/lib/session";
+
+export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const next = safeRedirectPath((await searchParams).next);
+  if (await getSession()) redirect(next);
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 p-6">
+      <h1 className="text-2xl font-semibold">Create an account</h1>
+      <AuthForm mode="sign-up" next={next} socialProviders={enabledSocialProviders()} />
+      <p className="text-sm text-[var(--foreground-muted)]">
+        Already registered?{" "}
+        <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-[var(--foreground)] underline">
+          Sign in
+        </Link>
+      </p>
+    </main>
+  );
+}