@flaredev/cli 0.4.0 → 0.4.1

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

@@ -10,7 +10,7 @@ import { getDb } from "@/db";
 import { savedView } from "@/db/flare-schema";
 import { toCsv } from "@/lib/csv";
 import { storage } from "@/lib/storage";
-import { can, storedFields, type PolicyAction } from "@flaredev/core";
+import { can, storedFields, type PolicyAction, type Resource } from "@flaredev/core";
 import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
@@ -26,6 +26,23 @@ async function allowed(resourceName: string, action: PolicyAction): Promise<Acti
   if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
 }
 
+/**
+ * Take a deleted record's uploads out of storage.
+ *
+ * The row is gone, so nothing can point at those objects again, and an app that never
+ * removes them pays to keep files no one can reach. A failure here is swallowed on
+ * purpose: the record is already deleted, and a stray object is a smaller problem than
+ * an action that reports failure after having done the work.
+ */
+async function removeUploads(resource: Resource, record: Record<string, unknown> | null | undefined): Promise<void> {
+  if (!record) return;
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "file") continue;
+    const value = record[key];
+    if (typeof value === "string" && value) await storage.delete(value).catch(() => undefined);
+  }
+}
+
 export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
   const denied = await allowed(resourceName, "delete");
   if (denied) return denied;
@@ -34,6 +51,7 @@ export async function deleteRecordAction(resourceName: string, id: string): Prom
   const existing = await store.get(id);
   const result = await store.delete(id);
   if (result.ok) {
+    await removeUploads(store.resource, existing.ok ? existing.data : null);
     await recordAudit({
       action: "delete",
       resource: resourceName,
@@ -67,10 +85,15 @@ export async function deleteManyAction(resourceName: string, ids: string[]): Pro
   // at it) shouldn't take the rest of the batch with it.
   let deleted = 0;
   let failed = 0;
+  const hasFiles = storedFields(store.resource).some(([, def]) => def.kind === "file");
   for (const id of ids) {
+    // Only read the record first when there's an upload to clean up afterwards.
+    const existing = hasFiles ? await store.get(id) : null;
     const result = await store.delete(id);
-    if (result.ok) deleted++;
-    else failed++;
+    if (result.ok) {
+      deleted++;
+      if (existing?.ok) await removeUploads(store.resource, existing.data);
+    } else failed++;
   }
   if (deleted > 0) {
     await recordAudit({ action: "bulk-delete", resource: resourceName, changes: { deleted, failed } });
@@ -233,7 +256,17 @@ export async function createUploadUrlAction(
  * 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 }>> {
+export async function createReadUrlAction(
+  resourceName: string,
+  fieldKey: string,
+  key: string,
+  /**
+   * Serve the file as a download with this name instead of showing it in the tab. Object
+   * keys carry an id to keep them unique, so without this a download arrives called
+   * `3f1c…-invoice.pdf` — pass the name the record holds.
+   */
+  downloadAs?: 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;
@@ -242,5 +275,5 @@ export async function createReadUrlAction(resourceName: string, fieldKey: string
   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 }) } };
+  return { ok: true, data: { url: await storage.createReadUrl({ key, downloadAs: downloadAs || undefined }) } };
 }

package/templates/app/app/globals.css

@@ -1,11 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-/* One typeface per theme (self-hosted; only the active theme's font is downloaded). */
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/plus-jakarta-sans";
-@import "@fontsource-variable/noto-sans";
-@import "@fontsource-variable/geist";
-@import "@fontsource-variable/figtree";
 
 /*
  * Dark mode: the `dark` class on <html> (set from the theme cookie) or, with no

package/templates/app/app/layout.tsx

@@ -1,28 +1,37 @@
-import type { Metadata } from "next";
-import { site } from "@/lib/site";
-import { activeTheme } from "@/lib/theme";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: { default: site.name, template: `%s · ${site.name}` },
-  description: site.description,
-};
-
-/**
- * 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" data-theme={activeTheme} suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { activeTheme } from "@/lib/theme";
+import "./globals.css";
+// One typeface per theme, self-hosted; the browser only downloads the one in use.
+// These are imported here rather than from globals.css because Tailwind inlines a CSS
+// @import, and the font files' relative URLs are then resolved against the wrong file
+// and never emitted — which shows up only in a build, as every font 404ing.
+import "@fontsource-variable/inter";
+import "@fontsource-variable/plus-jakarta-sans";
+import "@fontsource-variable/noto-sans";
+import "@fontsource-variable/geist";
+import "@fontsource-variable/figtree";
+
+export const metadata: Metadata = {
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.description,
+};
+
+/**
+ * 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" data-theme={activeTheme} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

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

@@ -48,6 +48,7 @@ function formatBytes(bytes: number): string {
 
 /** ["image", "pdf"] → "image or PDF" (acronyms stay upper case). */
 function describeAccept(accept: readonly string[]): string {
+  if (accept.includes("any")) return "any file";
   const names = accept.map((category) => (category === "pdf" || category === "csv" ? category.toUpperCase() : category));
   return names.length > 1 ? `${names.slice(0, -1).join(", ")} or ${names.at(-1)}` : names[0]!;
 }
@@ -129,6 +130,9 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
     const problem = await check(file);
     if (problem) return setError(problem);
 
+    // A browser leaves `type` empty for an extension it doesn't know, and an upload has
+    // to say what it is sending, so fall back to the type that means "bytes".
+    const contentType = file.type || "application/octet-stream";
     const signal: { abort?: () => void } = {};
     const localPreview = IMAGE_TYPES.has(file.type) ? URL.createObjectURL(file) : null;
     setUpload({ name: file.name, loaded: 0, total: file.size, abort: () => signal.abort?.() });
@@ -136,7 +140,7 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
     setStatus(`Uploading ${file.name}…`);
 
     try {
-      const signed = await createUploadUrlAction(resourceName, fieldKey, { name: file.name, type: file.type, size: file.size });
+      const signed = await createUploadUrlAction(resourceName, fieldKey, { name: file.name, type: contentType, size: file.size });
       if (!signed.ok) throw new Error(signed.error);
       await put(signed.data.url, file, (loaded) => setUpload((current) => current && { ...current, loaded }), signal);
       onChange(signed.data.key);

package/templates/app/components/dashboard/fields/relation-field.tsx

@@ -33,7 +33,29 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
   const [query, setQuery] = useState("");
   const [options, setOptions] = useState<Option[]>([]);
   const [loading, setLoading] = useState(false);
-  const [title, setTitle] = useState(relation.initialTitle ?? "");
+  // The title is remembered against the id it belongs to, so a value that changes
+  // underneath the field doesn't keep the name of the record it used to hold.
+  const [known, setKnown] = useState({ id: value, title: relation.initialTitle ?? "" });
+  const title = known.id === value ? known.title : "";
+
+  // A form opened from a table row is given the id but not the name behind it. Looking it
+  // up here means the field reads correctly wherever the form was rendered.
+  useEffect(() => {
+    if (!value || title) return;
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        const response = await fetch(`/api/${relation.slug}/${value}`, { signal: controller.signal, credentials: "same-origin" });
+        if (!response.ok) return;
+        const record = (await response.json()) as Record<string, unknown>;
+        const found = record[relation.titleField];
+        if (found) setKnown({ id: value, title: String(found) });
+      } catch {
+        // Leave the id showing; the field still works.
+      }
+    })();
+    return () => controller.abort();
+  }, [value, title, relation.slug, relation.titleField]);
 
   useEffect(() => {
     if (!open) return;
@@ -99,7 +121,7 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
                     value={option.id}
                     onSelect={() => {
                       onChange(option.id);
-                      setTitle(option.title);
+                      setKnown({ id: option.id, title: option.title });
                       setOpen(false);
                     }}
                   >
@@ -121,7 +143,7 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
           disabled={disabled}
           onClick={() => {
             onChange("");
-            setTitle("");
+            setKnown({ id: "", title: "" });
           }}
         >
           <XIcon />

package/templates/app/components/dashboard/import-dialog.tsx

@@ -10,7 +10,7 @@ import {
   storedFields,
   type EnumField,
   type MultiSelectField,
-  type Resource,
+  type ClientResource,
   type StoredField,
 } from "@flaredev/core";
 import { importRecordsAction } from "@/app/dashboard/import-actions";
@@ -202,7 +202,7 @@ function guessMapping(fields: MappedField[], headers: string[]): Record<string,
  * schemas and again on the server, and sent in batches so a long file reports progress
  * and never depends on one very long request.
  */
-export function ImportDialog({ resource }: { resource: Resource }) {
+export function ImportDialog({ resource }: { resource: ClientResource }) {
   const router = useRouter();
   const validators = useMemo(() => createValidators(resource), [resource]);
   // Uploads need a signed URL per file, which a CSV cell can't stand in for.

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
-import type { Resource } from "@flaredev/core";
+import type { ClientResource } from "@flaredev/core";
 import { deleteRecordAction } from "@/app/dashboard/actions";
 import {
   AlertDialog,
@@ -21,7 +21,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
 
 interface Props {
-  resource: Resource;
+  resource: ClientResource;
   id: string;
   record: Record<string, unknown>;
   relations: FormRelations;

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

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { formatValue, optionLabel, relationGraph, statusTone, storedFields, type Resource } from "@flaredev/core";
+import { clientResource, formatValue, optionLabel, relationGraph, statusTone, storedFields, type Resource } from "@flaredev/core";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -23,6 +23,9 @@ const RELATED_LIMIT = 5;
  */
 export async function RecordDetail({ resource, id }: { resource: Resource; id: string }) {
   await requireAccess(resource, "read");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
   const store = dashboardStore(resource.name);
   const result = await store.get(id);
   if (!result.ok) notFound();
@@ -81,7 +84,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
         ]}
         actions={
           <RecordActions
-            resource={resource}
+            resource={forClient}
             id={id}
             record={record}
             relations={relations}

package/templates/app/components/dashboard/resource-form-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { PlusIcon } from "lucide-react";
-import type { Resource } from "@flaredev/core";
+import type { ClientResource } from "@flaredev/core";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import type { RelationMeta } from "./fields/field-widget";
@@ -11,7 +11,7 @@ import { ResourceForm } from "./resource-form";
 export type FormRelations = Record<string, RelationMeta & { initialTitle?: string }>;
 
 interface Props {
-  resource: Resource;
+  resource: ClientResource;
   relations: FormRelations;
   listHref: string;
   mode: "create" | "edit";
@@ -62,7 +62,7 @@ export function ResourceFormDialog({ resource, relations, listHref, mode, id, re
 }
 
 /** The list page's "New …" button, when forms open in a dialog. */
-export function NewRecordButton({ resource, relations, listHref }: { resource: Resource; relations: FormRelations; listHref: string }) {
+export function NewRecordButton({ resource, relations, listHref }: { resource: ClientResource; relations: FormRelations; listHref: string }) {
   return (
     <ResourceFormDialog
       resource={resource}

package/templates/app/components/dashboard/resource-form-page.tsx

@@ -1,61 +1,64 @@
-import { notFound } from "next/navigation";
-import { formatValue, storedFields, type Resource } from "@flaredev/core";
-import { resourcePath, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
-import type { RelationMeta } from "./fields/field-widget";
-import { PageHeader } from "./page-header";
-import { ResourceForm } from "./resource-form";
-
-/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
-export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
-  await requireAccess(resource, id ? "update" : "create");
-  let record: Record<string, unknown> | null = null;
-  if (id) {
-    const result = await dashboardStore(resource.name).get(id);
-    if (!result.ok) notFound();
-    record = result.data;
-  }
-
-  const byName = new Map(allResources().map((r) => [r.name, r]));
-  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
-  for (const [key, def] of storedFields(resource)) {
-    if (def.kind !== "belongsTo") continue;
-    const target = byName.get(def.target);
-    if (!target) continue;
-    const value = record?.[key];
-    const titles = typeof value === "string" ? await dashboardStore(target.name).titles([value]) : {};
-    relations[key] = {
-      name: target.name,
-      label: target.label,
-      pluralLabel: target.pluralLabel,
-      slug: target.slug,
-      titleField: target.titleField,
-      initialTitle: typeof value === "string" ? titles[value] : undefined,
-    };
-  }
-
-  const titleDef = resource.fields[resource.titleField];
-  const title =
-    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
-
-  return (
-    <div className="flex flex-col gap-6">
-      <PageHeader
-        title={title}
-        description={record ? `Edit this ${resource.label.toLowerCase()}.` : `Add a ${resource.label.toLowerCase()} to ${resource.pluralLabel.toLowerCase()}.`}
-        crumbs={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: resource.pluralLabel, href: resourcePath(resource) },
-          { label: record ? "Edit" : "New" },
-        ]}
-      />
-      <ResourceForm
-        resource={resource}
-        mode={record ? "edit" : "create"}
-        id={id}
-        record={record}
-        relations={relations}
-        listHref={resourcePath(resource)}
-      />
-    </div>
-  );
-}
+import { notFound } from "next/navigation";
+import { clientResource, formatValue, storedFields, type Resource } from "@flaredev/core";
+import { resourcePath, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import type { RelationMeta } from "./fields/field-widget";
+import { PageHeader } from "./page-header";
+import { ResourceForm } from "./resource-form";
+
+/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
+export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
+  await requireAccess(resource, id ? "update" : "create");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
+  let record: Record<string, unknown> | null = null;
+  if (id) {
+    const result = await dashboardStore(resource.name).get(id);
+    if (!result.ok) notFound();
+    record = result.data;
+  }
+
+  const byName = new Map(allResources().map((r) => [r.name, r]));
+  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "belongsTo") continue;
+    const target = byName.get(def.target);
+    if (!target) continue;
+    const value = record?.[key];
+    const titles = typeof value === "string" ? await dashboardStore(target.name).titles([value]) : {};
+    relations[key] = {
+      name: target.name,
+      label: target.label,
+      pluralLabel: target.pluralLabel,
+      slug: target.slug,
+      titleField: target.titleField,
+      initialTitle: typeof value === "string" ? titles[value] : undefined,
+    };
+  }
+
+  const titleDef = resource.fields[resource.titleField];
+  const title =
+    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={title}
+        description={record ? `Edit this ${resource.label.toLowerCase()}.` : `Add a ${resource.label.toLowerCase()} to ${resource.pluralLabel.toLowerCase()}.`}
+        crumbs={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: resource.pluralLabel, href: resourcePath(resource) },
+          { label: record ? "Edit" : "New" },
+        ]}
+      />
+      <ResourceForm
+        resource={forClient}
+        mode={record ? "edit" : "create"}
+        id={id}
+        record={record}
+        relations={relations}
+        listHref={resourcePath(resource)}
+      />
+    </div>
+  );
+}