@flaredev/cli 0.1.0

package/templates/app/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/templates/app/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+// The theme comes from the admin layout (cookie-backed), so no theme provider is needed.
+const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/templates/app/components/ui/spinner.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/templates/app/components/ui/switch.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/templates/app/components/ui/table.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/templates/app/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/templates/app/components/ui/tooltip.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/templates/app/components.json

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

package/templates/app/db/auth-schema.ts

@@ -0,0 +1,118 @@
+/**
+ * Better Auth tables (user, session, account, verification), including the admin
+ * plugin's columns (user.role/banned/ban_reason/ban_expires, session.impersonated_by).
+ * Generated with `auth generate --adapter drizzle --dialect sqlite` (better-auth 1.7.5).
+ * Re-generate if you add Better Auth plugins that extend the schema.
+ */
+import { relations, sql } from "drizzle-orm";
+import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
+
+export const user = sqliteTable("user", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: integer("email_verified", { mode: "boolean" })
+    .default(false)
+    .notNull(),
+  image: text("image"),
+  createdAt: integer("created_at", { mode: "timestamp_ms" })
+    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+    .notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+    .$onUpdate(() => /* @__PURE__ */ new Date())
+    .notNull(),
+  role: text("role"),
+  banned: integer("banned", { mode: "boolean" }).default(false),
+  banReason: text("ban_reason"),
+  banExpires: integer("ban_expires", { mode: "timestamp_ms" }),
+});
+
+export const session = sqliteTable(
+  "session",
+  {
+    id: text("id").primaryKey(),
+    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+    token: text("token").notNull().unique(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    impersonatedBy: text("impersonated_by"),
+  },
+  (table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = sqliteTable(
+  "account",
+  {
+    id: text("id").primaryKey(),
+    accountId: text("account_id").notNull(),
+    providerId: text("provider_id").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    accessToken: text("access_token"),
+    refreshToken: text("refresh_token"),
+    idToken: text("id_token"),
+    accessTokenExpiresAt: integer("access_token_expires_at", {
+      mode: "timestamp_ms",
+    }),
+    refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+      mode: "timestamp_ms",
+    }),
+    scope: text("scope"),
+    password: text("password"),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = sqliteTable(
+  "verification",
+  {
+    id: text("id").primaryKey(),
+    identifier: text("identifier").notNull(),
+    value: text("value").notNull(),
+    expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const userRelations = relations(user, ({ many }) => ({
+  sessions: many(session),
+  accounts: many(account),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, {
+    fields: [account.userId],
+    references: [user.id],
+  }),
+}));

package/templates/app/db/flare-schema.ts

@@ -0,0 +1,15 @@
+import { sql } from "drizzle-orm";
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+/**
+ * Roles a user can hold (`user.role` from Better Auth's admin plugin).
+ * Register them with `flare role:add <name>`, assign with `flare user:role <email> <role>`,
+ * and grant access per resource with `flare gen policy <Resource> --roles ...`.
+ */
+export const role = sqliteTable("role", {
+  name: text("name").primaryKey(),
+  label: text("label").notNull(),
+  createdAt: integer("created_at", { mode: "timestamp_ms" })
+    .notNull()
+    .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
+});

package/templates/app/db/index.ts

@@ -0,0 +1,10 @@
+import { env } from "cloudflare:workers";
+import { drizzle } from "drizzle-orm/d1";
+import * as schema from "./schema";
+
+/** Drizzle client bound to the `DB` D1 binding. Call inside a request (server component, route handler, action). */
+export function getDb() {
+  return drizzle(env.DB, { schema });
+}
+
+export { schema };

package/templates/app/db/schema.ts

@@ -0,0 +1,12 @@
+/**
+ * Drizzle schema entry point. drizzle-kit reads this file to generate
+ * migrations, and `db/index.ts` passes it to the query builder.
+ *
+ * Add hand-written tables anywhere outside the generated block below.
+ */
+
+export * from "./auth-schema";
+export * from "./flare-schema";
+
+// generated:start
+// generated:end

package/templates/app/drizzle.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  dialect: "sqlite",
+  schema: "./db/schema.ts",
+  // Must match `migrations_dir` for the DB binding in wrangler.jsonc.
+  out: "./migrations",
+});

package/templates/app/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/templates/app/lib/admin-nav.ts

@@ -0,0 +1,15 @@
+// Extra admin sidebar links (maintained by flare generators such as `flare gen security`).
+// Add your own links outside the generated block.
+// generated:start
+export interface AdminLink {
+  label: string;
+  href: string;
+  /** A resource icon name, e.g. "shield" (see components/admin/resource-icon.tsx). */
+  icon: string;
+}
+
+export const generatedAdminLinks: AdminLink[] = [];
+// generated:end
+
+/** Links shown under "Platform" in the admin sidebar. */
+export const adminLinks: AdminLink[] = [...generatedAdminLinks];

package/templates/app/lib/admin.ts

@@ -0,0 +1,103 @@
+import { headers } from "next/headers";
+import { notFound, redirect } from "next/navigation";
+import { allowedActions, can, type Policy, type PolicyAction, type Resource } from "@flaredev/core";
+import type { SQLiteTable } from "drizzle-orm/sqlite-core";
+import { createResourceStore, type ResourceStore } from "@flaredev/core/server";
+import { getDb } from "@/db";
+import { policies } from "@/policies";
+import { resourceTables } from "@/resources/server";
+import { auth } from "./auth";
+import { cached, resourceTag, revalidateResource, TTL } from "./cache";
+
+/**
+ * Roles that always reach /admin, whatever the policies say. Other roles get in when a
+ * policy grants them read access to at least one resource.
+ * Register roles with `flare role:add`, assign with `flare user:role`.
+ */
+export const ADMIN_ROLES = ["admin", "staff"];
+
+export function policyFor(resourceName: string): Policy | undefined {
+  return (policies as Record<string, Policy | undefined>)[resourceName];
+}
+
+export async function adminSession() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return { session: null, role: null, allowed: false } as const;
+  const role = (session.user as { role?: string | null }).role ?? null;
+  const readable = adminResources().some((resource) => can(policyFor(resource.name), role, "read"));
+  return { session, role, allowed: (role !== null && ADMIN_ROLES.includes(role)) || readable } as const;
+}
+
+/** For admin pages: redirects signed-out visitors to sign-in and users without access to the home page. */
+export async function requireAdmin(returnTo = "/admin") {
+  const { session, role, allowed } = await adminSession();
+  if (!session) redirect(`/sign-in?next=${encodeURIComponent(returnTo)}`);
+  if (!allowed) redirect("/?error=forbidden");
+  return { session, role };
+}
+
+/**
+ * For resource pages: also requires the policy to allow `action` on this resource.
+ * Sends the user somewhere they can actually go — the list when they may read it,
+ * the dashboard when they may not.
+ */
+export async function requireAccess(resource: Resource, action: PolicyAction) {
+  const { session, role } = await requireAdmin(adminPath(resource));
+  const policy = policyFor(resource.name);
+  if (!can(policy, role, action)) {
+    redirect(action !== "read" && can(policy, role, "read") ? adminPath(resource) : "/admin?error=forbidden");
+  }
+  return { session, role };
+}
+
+/** What the current user may do with a resource, for hiding actions they can't use. */
+export async function adminPermissions(resourceName: string) {
+  const { role } = await adminSession();
+  return allowedActions(policyFor(resourceName), role);
+}
+
+const stores = new Map<string, ResourceStore>();
+
+/** CRUD store for a resource by name (404 for unknown names). */
+export function adminStore(name: string): ResourceStore {
+  const entry = (resourceTables as unknown as Record<string, { resource: Resource; table: SQLiteTable } | undefined>)[name];
+  if (!entry) notFound();
+  let store = stores.get(name);
+  if (!store) {
+    store = createResourceStore({ resource: entry.resource, table: entry.table, getDb, onChange: revalidateResource });
+    stores.set(name, store);
+  }
+  return store;
+}
+
+/**
+ * How many records a resource has. Cached in the data cache under the resource's tag,
+ * so the dashboard does not count every table on every visit, and a write through the
+ * admin or the API drops the count on its way out.
+ */
+export function recordCount(name: string): Promise<number> {
+  const count = cached(
+    async (resourceName: string) => {
+      const result = await adminStore(resourceName).list(new URLSearchParams({ perPage: "1" }));
+      return result.ok ? result.data.meta.total : 0;
+    },
+    ["flare", "record-count"],
+    { tags: [resourceTag(name)], revalidate: TTL.short },
+  );
+  return count(name);
+}
+
+/** Every resource descriptor (unfiltered): navigation uses `visibleResources()` instead. */
+export function adminResources(): Resource[] {
+  return Object.values(resourceTables as unknown as Record<string, { resource: Resource }>).map((entry) => entry.resource);
+}
+
+/** Resources the current user may read, for the sidebar and dashboard. */
+export async function visibleResources(): Promise<Resource[]> {
+  const { role } = await adminSession();
+  return adminResources().filter((resource) => can(policyFor(resource.name), role, "read"));
+}
+
+export function adminPath(resource: Resource, ...parts: string[]) {
+  return ["/admin", resource.slug, ...parts].join("/");
+}

package/templates/app/lib/api.ts

@@ -0,0 +1,24 @@
+import { can, type Policy } from "@flaredev/core";
+import type { Authorize } from "@flaredev/core/server";
+import { policies } from "@/policies";
+import { auth } from "./auth";
+
+/**
+ * Authorization for every generated resource API (`app/api/<resource>/...`).
+ * Return a Response to deny the request; return nothing to allow it.
+ *
+ * A signed-in user is required. Beyond that, a resource's policy decides
+ * (`flare gen policy <Resource> --roles admin,staff`); resources without a policy
+ * are open to any signed-in user. The admin UI reads the same policies, so the two
+ * never drift apart.
+ */
+export const authorize: Authorize = async ({ request, resource, action }) => {
+  const session = await auth.api.getSession({ headers: request.headers });
+  if (!session) return Response.json({ error: "Sign in required." }, { status: 401 });
+
+  const role = (session.user as { role?: string | null }).role ?? null;
+  const policy = (policies as Record<string, Policy | undefined>)[resource.name];
+  if (!can(policy, role, action)) {
+    return Response.json({ error: `Your role can't ${action} ${resource.pluralLabel.toLowerCase()}.` }, { status: 403 });
+  }
+};

package/templates/app/lib/auth-client.ts

@@ -0,0 +1,4 @@
+import { createAuthClient } from "better-auth/react";
+
+/** Browser-side auth client. Same origin as the app, so no baseURL is needed. */
+export const authClient = createAuthClient();