@flaredev/cli 0.4.0 → 0.5.0

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

@@ -1,186 +1,237 @@
-"use client";
-
-import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import { DateField, DateTimeField } from "./date-field";
-import { CountryField } from "./country-field";
-import { FileField } from "./file-field";
-import { MultiSelectField } from "./multi-select-field";
-import { PhoneField } from "./phone-field";
-import { RelationField } from "./relation-field";
-
-export interface RelationMeta {
-  name: string;
-  label: string;
-  pluralLabel: string;
-  slug: string;
-  titleField: string;
-}
-
-export interface WidgetProps {
-  id: string;
-  name: string;
-  /** Resource name and field key, for upload actions. */
-  resourceName: string;
-  fieldKey: string;
-  field: StoredField & { label: string };
-  value: string | boolean;
-  onChange: (value: string | boolean) => void;
-  invalid: boolean;
-  disabled?: boolean;
-  /** belongsTo: the related resource and the current value's title. */
-  relation?: RelationMeta & { initialTitle?: string };
-}
-
-const NONE = "__none__";
-
-/** The input for a field, chosen from its kind in the descriptor. */
-export function FieldWidget(props: WidgetProps) {
-  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey } = props;
-  const text = typeof value === "string" ? value : "";
-  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
-
-  switch (field.kind) {
-    case "text":
-      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
-
-    case "int":
-    case "float":
-      return (
-        <Input
-          {...common}
-          type="text"
-          inputMode={field.kind === "int" ? "numeric" : "decimal"}
-          className="tabular-nums"
-          value={text}
-          onChange={(event) => onChange(event.target.value)}
-        />
-      );
-
-    case "boolean":
-      return (
-        <Switch
-          id={id}
-          name={name}
-          disabled={disabled}
-          aria-invalid={invalid || undefined}
-          checked={value === true}
-          onCheckedChange={(checked) => onChange(checked)}
-        />
-      );
-
-    case "enum":
-      if (field.widget === "radio") {
-        return (
-          <RadioGroup id={id} name={name} value={text} onValueChange={onChange} disabled={disabled} aria-invalid={invalid || undefined} className="flex flex-wrap gap-x-5 gap-y-2.5">
-            {field.options.map((option) => (
-              <div key={option} className="flex items-center gap-2">
-                <RadioGroupItem id={`${id}-${option}`} value={option} aria-invalid={invalid || undefined} />
-                <Label htmlFor={`${id}-${option}`} className="font-normal">
-                  {optionLabel(field, option)}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        );
-      }
-      return (
-        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
-        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
-          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
-            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
-              {field.options.map((option) => (
-                <SelectItem key={option} value={option}>
-                  {optionLabel(field, option)}
-                </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-    case "multiselect":
-      return (
-        <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
-      );
-
-    case "date":
-      return (
-        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "datetime":
-      return (
-        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "belongsTo":
-      return relation ? (
-        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
-      ) : (
-        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
-      );
-
-    case "file":
-      return (
-        <FileField
-          id={id}
-          value={text}
-          onChange={onChange}
-          invalid={invalid}
-          disabled={disabled}
-          field={field as FileFieldDef & { label: string }}
-          resourceName={resourceName}
-          fieldKey={fieldKey}
-        />
-      );
-
-    case "string":
-      switch (field.format) {
-        case "tel":
-          return <PhoneField id={id} name={name} label={field.label} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
-        case "country":
-          return <CountryField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />;
-        case "color":
-          return (
-            <div className="flex items-center gap-2">
-              <input
-                type="color"
-                aria-label={`${field.label} picker`}
-                value={/^#[0-9a-f]{6}$/i.test(text) ? text : "#000000"}
-                onChange={(event) => onChange(event.target.value)}
-                disabled={disabled}
-                className="h-9 w-11 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1"
-              />
-              <Input {...common} className="font-mono" placeholder={field.placeholder ?? "#f2541d"} value={text} onChange={(event) => onChange(event.target.value)} />
-            </div>
-          );
-        case "slug":
-          return (
-            <Input {...common} className="font-mono" placeholder={field.placeholder ?? "my-first-post"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(slugify(text))} />
-          );
-        case "domain":
-          return (
-            <Input {...common} inputMode="url" autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "example.com"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(normalizeDomain(text))} />
-          );
-        case "email":
-          return <Input {...common} type="email" autoComplete="email" value={text} onChange={(event) => onChange(event.target.value)} />;
-        case "url":
-          return <Input {...common} type="url" placeholder={field.placeholder ?? "https://"} value={text} onChange={(event) => onChange(event.target.value)} />;
-        default:
-          return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
-      }
-
-    default:
-      return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
-  }
-}
+"use client";
+
+import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { groupDigits, ungroup } from "@/lib/number";
+import { DateField, DateTimeField } from "./date-field";
+import { CountryField } from "./country-field";
+import { FileField } from "./file-field";
+import { MultiSelectField } from "./multi-select-field";
+import { PhoneField } from "./phone-field";
+import { RelationField } from "./relation-field";
+
+export interface RelationMeta {
+  name: string;
+  label: string;
+  pluralLabel: string;
+  slug: string;
+  titleField: string;
+}
+
+export interface WidgetProps {
+  id: string;
+  name: string;
+  /** Resource name and field key, for upload actions. */
+  resourceName: string;
+  fieldKey: string;
+  field: StoredField & { label: string };
+  value: string | boolean;
+  onChange: (value: string | boolean) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  /** belongsTo: the related resource and the current value's title. */
+  relation?: RelationMeta & { initialTitle?: string };
+  /**
+   * A value this field can make up for itself — a SKU, a slug, a reference. Given for
+   * unique codes, where typing one by hand is busywork, and shown as a button beside
+   * the input so whatever it suggests can still be typed over.
+   */
+  suggest?: () => string;
+}
+
+const NONE = "__none__";
+
+/** The input for a field, chosen from its kind in the descriptor. */
+export function FieldWidget(props: WidgetProps) {
+  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey, suggest } = props;
+  const text = typeof value === "string" ? value : "";
+  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
+
+  switch (field.kind) {
+    case "text":
+      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
+
+    case "int":
+    case "float":
+      // Shown grouped (2,000) and stored plain (2000), so a price can be read at a glance
+      // and nothing downstream has to strip a comma back out.
+      return (
+        <Input
+          {...common}
+          type="text"
+          inputMode={field.kind === "int" ? "numeric" : "decimal"}
+          className="tabular-nums"
+          value={groupDigits(text)}
+          onChange={(event) => onChange(ungroup(event.target.value, field.kind === "float"))}
+        />
+      );
+
+    case "boolean":
+      return (
+        <Switch
+          id={id}
+          name={name}
+          disabled={disabled}
+          aria-invalid={invalid || undefined}
+          checked={value === true}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      );
+
+    case "enum":
+      if (field.widget === "radio") {
+        return (
+          <RadioGroup id={id} name={name} value={text} onValueChange={onChange} disabled={disabled} aria-invalid={invalid || undefined} className="flex flex-wrap gap-x-5 gap-y-2.5">
+            {field.options.map((option) => (
+              <div key={option} className="flex items-center gap-2">
+                <RadioGroupItem id={`${id}-${option}`} value={option} aria-invalid={invalid || undefined} />
+                <Label htmlFor={`${id}-${option}`} className="font-normal">
+                  {optionLabel(field, option)}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
+      }
+      return (
+        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
+        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
+          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
+            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
+              {field.options.map((option) => (
+                <SelectItem key={option} value={option}>
+                  {optionLabel(field, option)}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    case "multiselect":
+      return (
+        <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
+      );
+
+    case "date":
+      return (
+        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "datetime":
+      return (
+        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "belongsTo":
+      return relation ? (
+        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
+      ) : (
+        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
+      );
+
+    case "file":
+      return (
+        <FileField
+          id={id}
+          value={text}
+          onChange={onChange}
+          invalid={invalid}
+          disabled={disabled}
+          field={field as FileFieldDef & { label: string }}
+          resourceName={resourceName}
+          fieldKey={fieldKey}
+        />
+      );
+
+    case "string":
+      switch (field.format) {
+        case "tel":
+          return <PhoneField id={id} name={name} label={field.label} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
+        case "country":
+          return <CountryField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />;
+        case "color":
+          return (
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                aria-label={`${field.label} picker`}
+                value={/^#[0-9a-f]{6}$/i.test(text) ? text : "#000000"}
+                onChange={(event) => onChange(event.target.value)}
+                disabled={disabled}
+                className="h-9 w-11 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1"
+              />
+              <Input {...common} className="font-mono" placeholder={field.placeholder ?? "#f2541d"} value={text} onChange={(event) => onChange(event.target.value)} />
+            </div>
+          );
+        case "slug":
+          return (
+            <WithSuggestion suggest={suggest} disabled={disabled} onChange={onChange}>
+              <InputGroupInput {...common} className="font-mono" placeholder={field.placeholder ?? "my-first-post"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(slugify(text))} />
+            </WithSuggestion>
+          );
+        case "domain":
+          return (
+            <Input {...common} inputMode="url" autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "example.com"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(normalizeDomain(text))} />
+          );
+        case "email":
+          return <Input {...common} type="email" autoComplete="email" value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "url":
+          return <Input {...common} type="url" placeholder={field.placeholder ?? "https://"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        default:
+          return (
+            <WithSuggestion suggest={suggest} disabled={disabled} onChange={onChange}>
+              <InputGroupInput {...common} value={text} onChange={(event) => onChange(event.target.value)} />
+            </WithSuggestion>
+          );
+      }
+
+    default:
+      return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
+  }
+}
+
+/**
+ * An input with a "Generate" button, when the form offered one for this field.
+ *
+ * Without a suggestion it stays an ordinary input, so the same branch serves a field
+ * that can make up its own value and one that can't.
+ */
+function WithSuggestion({
+  suggest,
+  disabled,
+  onChange,
+  children,
+}: {
+  suggest?: () => string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  children: React.ReactElement;
+}) {
+  if (!suggest) {
+    // InputGroupInput outside an InputGroup would lose its border; hand back a plain one.
+    const { className, ...rest } = children.props as { className?: string } & Record<string, unknown>;
+    return <Input {...rest} className={className} />;
+  }
+  return (
+    <InputGroup>
+      {children}
+      <InputGroupAddon align="inline-end">
+        <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={() => onChange(suggest())}>
+          Generate
+        </Button>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}

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,
@@ -18,10 +18,10 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 
 interface Props {
-  resource: Resource;
+  resource: ClientResource;
   id: string;
   record: Record<string, unknown>;
   relations: FormRelations;
@@ -29,12 +29,12 @@ interface Props {
   editHref: string;
   canUpdate: boolean;
   canDelete: boolean;
-  /** Whether editing opens a dialog (site.dashboard.forms) or goes to the form page. */
-  modalForms: boolean;
+  /** Whether editing opens a sheet (site.dashboard.forms) or goes to the form page. */
+  overlayForms: boolean;
 }
 
 /** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
-export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, modalForms }: Props) {
+export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms }: Props) {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -57,7 +57,7 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
   return (
     <>
       {canUpdate &&
-        (modalForms ? (
+        (overlayForms ? (
           <Button variant="outline" onClick={() => setEditing(true)}>
             <PencilIcon data-icon="inline-start" />
             Edit
@@ -77,8 +77,8 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
         </Button>
       )}
 
-      {canUpdate && modalForms && (
-        <ResourceFormDialog
+      {canUpdate && overlayForms && (
+        <ResourceFormSheet
           resource={resource}
           relations={relations}
           listHref={listHref}

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}
@@ -89,7 +92,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             editHref={resourcePath(resource, id, "edit")}
             canUpdate={permissions.update}
             canDelete={permissions.delete}
-            modalForms={site.dashboard.forms === "modal"}
+            overlayForms={site.dashboard.forms === "sheet"}
           />
         }
       />