@flaredev/cli 0.5.1 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.5.1"
+    "@flaredev/core": "0.6.1"
   },
   "engines": {
     "node": ">=22"

package/templates/app/app/dashboard/actions.ts

@@ -2,7 +2,7 @@
 
 import { revalidatePath } from "next/cache";
 import { createObjectKey, fileKeyPrefix, fileMaxBytes, matchesContentType, mimeTypesFor, type FileField } from "@flaredev/core";
-import type { FieldIssue } from "@flaredev/core/server";
+import type { FieldIssue } from "@/lib/resource/store";
 import { diffFields, recordAudit } from "@/lib/audit";
 import { listViews, MAX_VIEWS } from "@/lib/views";
 import { and, eq } from "drizzle-orm";

package/templates/app/app/dashboard/error.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+
+/**
+ * A dashboard page that threw.
+ *
+ * Inside the layout, so the sidebar stays and `reset` retries just this page — no
+ * sign-out, no lost place in the app.
+ */
+export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <Empty className="min-h-[60vh]">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <TriangleAlertIcon />
+        </EmptyMedia>
+        <EmptyTitle>This page didn&apos;t load</EmptyTitle>
+        <EmptyDescription>
+          Something went wrong fetching it.
+          {error.digest && <> Reference: <span className="font-mono select-all">{error.digest}</span>.</>}
+        </EmptyDescription>
+      </EmptyHeader>
+      <Button onClick={reset}>
+        <RefreshCwIcon data-icon="inline-start" />
+        Try again
+      </Button>
+    </Empty>
+  );
+}

package/templates/app/app/dashboard/import-actions.ts

@@ -3,7 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { recordAudit } from "@/lib/audit";
 import { can, type PolicyAction } from "@flaredev/core";
-import type { Failure } from "@flaredev/core/server";
+import type { Failure } from "@/lib/resource/store";
 import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
 import type { ActionResult } from "./actions";
 

package/templates/app/app/dashboard/loading.tsx

@@ -0,0 +1,18 @@
+import { PageHeaderSkeleton, StatsSkeleton, ChartSkeleton, TableSkeleton } from "@/components/dashboard/skeletons";
+
+/**
+ * The dashboard while its data loads.
+ *
+ * The sidebar and header are in the layout, so they stay put and only this part is
+ * drawn empty — which is the whole benefit of putting the frame in a layout.
+ */
+export default function DashboardLoading() {
+  return (
+    <>
+      <PageHeaderSkeleton actions={0} />
+      <StatsSkeleton />
+      <ChartSkeleton />
+      <TableSkeleton rows={5} />
+    </>
+  );
+}

package/templates/app/app/dashboard/not-found.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { SearchXIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+
+export const metadata = { title: "Not found" };
+
+/**
+ * A missing record or page inside the dashboard.
+ *
+ * Keeps the sidebar and header, because someone who followed a stale link to a
+ * deleted record is still signed in and still working — dropping them on the public
+ * 404 would throw away that context.
+ */
+export default function DashboardNotFound() {
+  return (
+    <Empty className="min-h-[60vh]">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <SearchXIcon />
+        </EmptyMedia>
+        <EmptyTitle>Not found</EmptyTitle>
+        <EmptyDescription>This page or record doesn&apos;t exist. It may have been deleted.</EmptyDescription>
+      </EmptyHeader>
+      <Button asChild>
+        <Link href="/dashboard">Back to the dashboard</Link>
+      </Button>
+    </Empty>
+  );
+}

package/templates/app/app/error.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
+
+/**
+ * The public error boundary.
+ *
+ * Reached when a page throws. It is a client component because it has to be — React
+ * needs somewhere to hand `reset`, which re-renders the segment without a full page
+ * load, and that is usually all a transient failure needs.
+ *
+ * `error.digest` is the only detail shown. The message itself is deliberately not:
+ * in production it is replaced by React anyway, and in development the overlay is
+ * more use than anything printed here.
+ */
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    // The browser console in development; whatever collects console output in production.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center gap-6 px-6 py-20 text-center">
+      <div className="flex size-14 items-center justify-center rounded-2xl border border-border bg-surface">
+        <TriangleAlertIcon className="size-6 text-danger" aria-hidden="true" />
+      </div>
+      <div className="flex flex-col gap-3">
+        <h1 className="text-3xl text-balance md:text-4xl">Something went wrong</h1>
+        <p className="text-foreground-muted text-pretty">
+          This one is on us. Trying again often works; if it doesn&apos;t, the error has been logged.
+        </p>
+        {error.digest && (
+          <p className="font-mono text-xs text-foreground-muted">
+            Reference: <span className="select-all">{error.digest}</span>
+          </p>
+        )}
+      </div>
+      <div className="flex flex-wrap justify-center gap-3">
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex h-11 items-center gap-2 rounded-[var(--button-radius)] bg-brand px-5 font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
+        >
+          <RefreshCwIcon className="size-4" aria-hidden="true" />
+          Try again
+        </button>
+        <Link href="/" className="inline-flex h-11 items-center rounded-[var(--button-radius)] border border-border px-5 font-medium hover:bg-accent">
+          Back home
+        </Link>
+      </div>
+    </main>
+  );
+}

package/templates/app/app/loading.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * The public shell while a page loads.
+ *
+ * Deliberately vague — it stands in for any public page, and guessing a layout it
+ * can't know would move things around once the real one arrives. Pages with a shape
+ * worth matching have their own `loading.tsx` beside them.
+ */
+export default function Loading() {
+  return (
+    <main className="mx-auto flex max-w-4xl flex-col items-center gap-6 px-6 py-24">
+      <Skeleton className="h-10 w-3/4 max-w-xl" />
+      <Skeleton className="h-10 w-2/3 max-w-lg" />
+      <Skeleton className="mt-2 h-5 w-full max-w-md" />
+      <div className="mt-6 flex gap-3">
+        <Skeleton className="h-12 w-36 rounded-[var(--button-radius)]" />
+        <Skeleton className="h-12 w-32 rounded-[var(--button-radius)]" />
+      </div>
+    </main>
+  );
+}

package/templates/app/app/not-found.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { ArrowLeftIcon, SearchXIcon } from "lucide-react";
+import { SiteHeader } from "@/components/marketing/site-header";
+
+export const metadata = { title: "Page not found" };
+
+/**
+ * The public 404.
+ *
+ * Shown for any address that doesn't match a route, so it keeps the site's chrome:
+ * someone who mistyped a URL should still be able to get where they were going,
+ * which is why the two ways out are a link home and a link to sign in rather than
+ * an apology.
+ */
+export default function NotFound() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center gap-6 px-6 py-20 text-center">
+        <div className="flex size-14 items-center justify-center rounded-2xl border border-border bg-surface">
+          <SearchXIcon className="size-6 text-foreground-muted" aria-hidden="true" />
+        </div>
+        <div className="flex flex-col gap-3">
+          <p className="font-mono text-sm tracking-widest text-foreground-muted">404</p>
+          <h1 className="text-3xl text-balance md:text-4xl">This page doesn&apos;t exist</h1>
+          <p className="text-foreground-muted text-pretty">
+            The link may be out of date, or the address may have a typo in it.
+          </p>
+        </div>
+        <div className="flex flex-wrap justify-center gap-3">
+          <Link
+            href="/"
+            className="inline-flex h-11 items-center gap-2 rounded-[var(--button-radius)] bg-brand px-5 font-medium text-brand-foreground [background-image:var(--brand-gradient,none)] hover:brightness-95"
+          >
+            <ArrowLeftIcon className="size-4" aria-hidden="true" />
+            Back home
+          </Link>
+          <Link
+            href="/dashboard"
+            className="inline-flex h-11 items-center rounded-[var(--button-radius)] border border-border px-5 font-medium hover:bg-accent"
+          >
+            Go to the dashboard
+          </Link>
+        </div>
+      </main>
+    </>
+  );
+}

package/templates/app/components/dashboard/fields/file-cell.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FileIcon } from "lucide-react";
+import { createReadUrlAction } from "@/app/dashboard/actions";
+
+/** Keys that are worth showing rather than naming. */
+const isImageKey = (key: string) => /\.(png|jpe?g|gif|webp|avif)$/i.test(key);
+
+/** "products/2026/09/kettle-a1b2c3.png" → "kettle-a1b2c3.png" */
+const basename = (key: string) => key.slice(key.lastIndexOf("/") + 1);
+
+/**
+ * A stored file in a table cell or a record's detail.
+ *
+ * Objects in the bucket are private, so there is no URL to put in `src` — one has to
+ * be signed, which is a server action, which makes this a client component. The same
+ * round trip the form field does, for the same reason.
+ *
+ * An image becomes a thumbnail; anything else is its filename, which is the useful
+ * part of a key nobody wants to read in full.
+ */
+export function FileCell({
+  resourceName,
+  fieldKey,
+  value,
+  size = 36,
+}: {
+  resourceName: string;
+  fieldKey: string;
+  value: string;
+  size?: number;
+}) {
+  const [url, setUrl] = useState<string | null>(null);
+  const image = isImageKey(value);
+
+  useEffect(() => {
+    if (!image) return;
+    let cancelled = false;
+    void createReadUrlAction(resourceName, fieldKey, value).then((result) => {
+      if (!cancelled && result.ok) setUrl(result.data.url);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [image, value, resourceName, fieldKey]);
+
+  if (!image) {
+    return (
+      <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+        <FileIcon aria-hidden="true" className="size-3.5" />
+        <span className="max-w-[16ch] truncate">{basename(value)}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className="inline-flex items-center justify-center overflow-hidden rounded-md border bg-muted align-middle"
+      style={{ width: size, height: size }}
+    >
+      {url ? (
+        // eslint-disable-next-line @next/next/no-img-element -- signed, short-lived URL
+        <img src={url} alt="" width={size} height={size} className="size-full object-cover" />
+      ) : null}
+    </span>
+  );
+}

package/templates/app/components/dashboard/record-detail.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { clientResource, formatValue, optionLabel, relationGraph, statusTone, storedFields, type Resource } from "@flaredev/core";
 import { Badge } from "@/components/ui/badge";
+import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { recentAudit } from "@/lib/audit";
@@ -111,6 +112,9 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
               } else if (def.kind === "enum" && value != null) {
                 const tone = statusTone(value);
                 content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+              } else if (def.kind === "file" && typeof value === "string" && value) {
+                // Bigger here than in the table: this is the page for looking at one record.
+                content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} />;
               } else if (def.kind === "multiselect" && Array.isArray(value) && value.length > 0) {
                 content = (
                   <span className="flex flex-wrap gap-1">

package/templates/app/components/dashboard/resource-table.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
+import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
 import { clientResource, formatValue, optionLabel, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
-import { isSortable } from "@flaredev/core/server";
+import { isSortable } from "@/lib/resource/query";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -207,6 +208,10 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                       } else if (column.def.kind === "enum" && value != null) {
                         const tone = statusTone(value);
                         content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+                      } else if (column.def.kind === "file" && typeof value === "string" && value) {
+                        // A thumbnail for an image, a filename for anything else — the raw
+                        // object key is noise in a table.
+                        content = <FileCell resourceName={resource.name} fieldKey={column.key} value={value} />;
                       } else if (column.def.kind === "multiselect" && Array.isArray(value) && value.length) {
                         const def = column.def;
                         content = (

package/templates/app/components/dashboard/skeletons.tsx

@@ -0,0 +1,146 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+/**
+ * The shapes pages take while their data is on its way.
+ *
+ * Each one is the layout it stands in for, drawn empty — the same header, the same
+ * number of columns, cards the same size. That is the whole point: a skeleton that
+ * matches keeps the page still when the content lands, where a spinner throws
+ * everything into place at once and makes the wait feel like a jump.
+ *
+ * They are built from the same tokens as the real thing, so they follow the theme
+ * without knowing which theme it is.
+ */
+
+/** One line of text. `w` is a Tailwind width, so a heading and a caption differ. */
+function Line({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-4 w-40", className)} />;
+}
+
+/** Title, description and the buttons on the right — matches PageHeader. */
+export function PageHeaderSkeleton({ actions = 1 }: { actions?: number }) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <Line className="h-3 w-20" />
+        <Line className="h-3 w-24" />
+      </div>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-7 w-48" />
+          <Line className="w-64" />
+        </div>
+        {actions > 0 && (
+          <div className="flex gap-2">
+            {Array.from({ length: actions }, (_, index) => (
+              <Skeleton key={index} className="h-9 w-28 rounded-[var(--button-radius)]" />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The row of counts above a resource table. */
+export function StatsSkeleton({ cards = 4 }: { cards?: number }) {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {Array.from({ length: cards }, (_, index) => (
+        <div key={index} className="rounded-xl border border-border bg-card p-4">
+          <Line className="h-3 w-24" />
+          <Skeleton className="mt-3 h-7 w-16" />
+          <Line className="mt-2 h-3 w-20" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A chart card. The bars vary so it reads as a chart rather than a block. */
+export function ChartSkeleton({ className }: { className?: string }) {
+  const bars = [45, 70, 35, 85, 55, 75, 40, 65, 50, 80, 60, 45];
+  return (
+    <div className={cn("rounded-xl border border-border bg-card p-4", className)}>
+      <Line className="h-3 w-32" />
+      <div className="mt-4 flex h-32 items-end gap-2" aria-hidden="true">
+        {bars.map((height, index) => (
+          <Skeleton key={index} className="flex-1 rounded-sm" style={{ height: `${height}%` }} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** The toolbar and rows of a resource table. */
+export function TableSkeleton({ rows = 8, columns = 5 }: { rows?: number; columns?: number }) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <Skeleton className="h-9 w-full max-w-xs rounded-[var(--button-radius)]" />
+        <Skeleton className="h-9 w-24 rounded-[var(--button-radius)]" />
+        <Skeleton className="h-9 w-24 rounded-[var(--button-radius)]" />
+        <Skeleton className="ml-auto h-9 w-20 rounded-[var(--button-radius)]" />
+      </div>
+      <div className="overflow-hidden rounded-xl border border-border">
+        <div className="flex items-center gap-4 border-b border-border bg-muted/40 px-4 py-3">
+          {Array.from({ length: columns }, (_, index) => (
+            <Line key={index} className={cn("h-3", index === 0 ? "w-32" : "w-20")} />
+          ))}
+        </div>
+        {Array.from({ length: rows }, (_, row) => (
+          <div key={row} className="flex items-center gap-4 border-b border-border px-4 py-3 last:border-b-0">
+            {Array.from({ length: columns }, (_, column) => (
+              <Line key={column} className={cn("h-4", column === 0 ? "w-32" : "w-20")} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** A form: fields in a column, buttons at the end. */
+export function FormSkeleton({ fields = 5 }: { fields?: number }) {
+  return (
+    <div className="flex max-w-2xl flex-col gap-6">
+      {Array.from({ length: fields }, (_, index) => (
+        <div key={index} className="flex flex-col gap-2">
+          <Line className="h-3 w-24" />
+          <Skeleton className="h-9 w-full rounded-[var(--button-radius)]" />
+        </div>
+      ))}
+      <div className="flex gap-2">
+        <Skeleton className="h-9 w-24 rounded-[var(--button-radius)]" />
+        <Skeleton className="h-9 w-20 rounded-[var(--button-radius)]" />
+      </div>
+    </div>
+  );
+}
+
+/** One record: its fields as label/value pairs. */
+export function DetailSkeleton({ rows = 6 }: { rows?: number }) {
+  return (
+    <div className="rounded-xl border border-border bg-card divide-y divide-border">
+      {Array.from({ length: rows }, (_, index) => (
+        <div key={index} className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-8">
+          <Line className="h-3 w-28 shrink-0" />
+          <Line className="h-4 w-48" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** The whole of a resource's list page, for its `loading.tsx`. */
+export function ResourceListSkeleton({ columns = 5 }: { columns?: number }) {
+  return (
+    <>
+      <PageHeaderSkeleton />
+      <StatsSkeleton />
+      <ChartSkeleton />
+      <TableSkeleton columns={columns} />
+    </>
+  );
+}

package/templates/app/lib/api.ts

@@ -1,6 +1,6 @@
 import { headers } from "next/headers";
 import { can, type Policy } from "@flaredev/core";
-import type { Authorize } from "@flaredev/core/server";
+import type { Authorize } from "@/lib/resource/handlers";
 import { policies } from "@/policies";
 import { auth } from "./auth";