@flaredev/cli 0.1.0

package/templates/app/components/admin/admin-header.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+export type Theme = "light" | "dark" | "system";
+
+/** Persist the choice for SSR (so the first paint matches) and apply it now. */
+function applyTheme(theme: Theme) {
+  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  if (theme !== "system") root.classList.add(theme);
+}
+
+export function AdminHeader({ user, initialTheme }: { user: { name?: string | null; email: string }; initialTheme: Theme }) {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-1 h-4" />
+      <div className="ml-auto flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
+          onClick={() => {
+            const next: Theme = dark ? "light" : "dark";
+            setTheme(next);
+            applyTheme(next);
+          }}
+        >
+          {dark ? <SunIcon /> : <MoonIcon />}
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-2">
+              <span className="max-w-40 truncate">{user.name || user.email}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="font-normal">
+              <span className="block truncate text-sm font-medium">{user.name || "Signed in"}</span>
+              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                onSelect={async () => {
+                  await authClient.signOut();
+                  window.location.assign("/sign-in");
+                }}
+              >
+                <LogOutIcon />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/admin/fields/date-field.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon, XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+/** "2026-01-05" ⇄ Date, treated as UTC so the calendar never shifts a day across time zones. */
+const toDate = (value: string) => {
+  const date = new Date(`${value}T00:00:00Z`);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+};
+const toISODate = (date: Date) =>
+  `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
+const display = (value: string, options: Intl.DateTimeFormatOptions) => {
+  const date = toDate(value);
+  return date ? new Intl.DateTimeFormat("en-US", { timeZone: "UTC", ...options }).format(date) : value;
+};
+
+interface Props {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  required: boolean;
+  placeholder?: string;
+}
+
+/** Date picker for `date` fields. Stores "YYYY-MM-DD". */
+export function DateField({ id, value, onChange, invalid, disabled, required, placeholder }: Props) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            aria-invalid={invalid || undefined}
+            className={cn("w-full justify-start font-normal", !value && "text-muted-foreground")}
+          >
+            <CalendarIcon data-icon="inline-start" />
+            {value ? display(value, { dateStyle: "medium" }) : (placeholder ?? "Pick a date")}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            autoFocus
+            selected={toDate(value)}
+            defaultMonth={toDate(value)}
+            onSelect={(date) => {
+              if (date) onChange(toISODate(date));
+              setOpen(false);
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+      {value && !required && (
+        <Button type="button" variant="ghost" size="icon" aria-label="Clear date" disabled={disabled} onClick={() => onChange("")}>
+          <XIcon />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/** Date + time picker for `datetime` fields. Stores an ISO string with offset (UTC). */
+export function DateTimeField({ id, value, onChange, invalid, disabled, required }: Props) {
+  const date = value ? new Date(value) : undefined;
+  const valid = date && !Number.isNaN(date.getTime());
+  const datePart = valid ? toISODate(date) : "";
+  const timePart = valid ? date.toISOString().slice(11, 16) : "";
+
+  const update = (nextDate: string, nextTime: string) => {
+    if (!nextDate) return onChange("");
+    const time = nextTime || "00:00";
+    const iso = new Date(`${nextDate}T${time}:00Z`);
+    onChange(Number.isNaN(iso.getTime()) ? "" : iso.toISOString());
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1">
+        <DateField
+          id={id}
+          value={datePart}
+          onChange={(next) => update(next, timePart)}
+          invalid={invalid}
+          disabled={disabled}
+          required={required}
+          placeholder="Pick a date"
+        />
+      </div>
+      <Input
+        type="time"
+        aria-label="Time (UTC)"
+        className="w-32 tabular-nums"
+        value={timePart}
+        disabled={disabled || !datePart}
+        aria-invalid={invalid || undefined}
+        onChange={(event) => update(datePart, event.target.value)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { optionLabel, type FileField as FileFieldDef, type StoredField } from "@flaredev/core";
+import { Input } from "@/components/ui/input";
+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 { FileField } from "./file-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":
+      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 "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}
+        />
+      );
+
+    default: {
+      const type = field.kind === "string" && field.format === "email" ? "email" : field.kind === "string" && field.format === "url" ? "url" : "text";
+      return <Input {...common} type={type} value={text} onChange={(event) => onChange(event.target.value)} />;
+    }
+  }
+}

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

@@ -0,0 +1,302 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { FileIcon, UploadIcon } from "lucide-react";
+import {
+  FILE_CATEGORIES,
+  fileMaxBytes,
+  matchesContentType,
+  mimeTypesFor,
+  SNIFF_BYTES,
+  sniffMatches,
+  type FileField as FileFieldDef,
+} from "@flaredev/core";
+import { createReadUrlAction, createUploadUrlAction } from "@/app/admin/actions";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  field: FileFieldDef & { label: string };
+  resourceName: string;
+  fieldKey: string;
+}
+
+type Upload = { name: string; loaded: number; total: number; abort: () => void };
+
+/** "contacts/avatar/2026/09/<uuid>-me.png" → "me.png" */
+const fileName = (key: string) => key.split("/").pop()!.replace(/^[0-9a-f-]{36}-/, "");
+
+const IMAGE_TYPES = new Set<string>(FILE_CATEGORIES.image);
+const isImageKey = (key: string) => /\.(png|jpe?g|gif|webp|avif)$/i.test(key);
+
+const oneDecimal = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });
+const whole = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+
+/** "1.9 MB" — with a non-breaking space so a size never wraps apart. */
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${whole.format(bytes)} B`;
+  if (bytes < 1024 * 1024) return `${whole.format(bytes / 1024)} KB`;
+  const megabytes = bytes / 1024 / 1024;
+  return `${(megabytes < 10 ? oneDecimal : whole).format(megabytes)} MB`;
+}
+
+/** ["image", "pdf"] → "image or PDF" (acronyms stay upper case). */
+function describeAccept(accept: readonly string[]): string {
+  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]!;
+}
+
+const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
+
+/** "image/png" → "PNG", used when a file's contents don't match its type. */
+const typeName = (type: string) => (type.split("/")[1] ?? type).replace(/^vnd\..*\./, "").toUpperCase();
+
+/** PUT with progress events, which fetch() can't report for uploads. */
+function put(url: string, file: File, onProgress: (loaded: number) => void, signal: { abort?: () => void }) {
+  return new Promise<void>((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    signal.abort = () => request.abort();
+    request.upload.onprogress = (event) => onProgress(event.loaded);
+    request.onload = () => {
+      if (request.status >= 200 && request.status < 300) return resolve();
+      let message = `Upload failed (${request.status}).`;
+      try {
+        message = (JSON.parse(request.responseText) as { error?: string }).error ?? message;
+      } catch {
+        // Not JSON: keep the status message.
+      }
+      reject(new Error(message));
+    };
+    request.onerror = () => reject(new Error("Upload failed. Check your connection and try again."));
+    request.onabort = () => reject(new DOMException("Upload cancelled.", "AbortError"));
+    request.open("PUT", url);
+    request.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+    request.send(file);
+  });
+}
+
+/**
+ * Upload widget for a `file:[…]` field. Checks type, size and contents in the browser
+ * first (the server repeats every check), uploads straight to storage through a signed
+ * URL with progress, and stores the object key in the form.
+ */
+export function FileField({ id, value, onChange, invalid, disabled, field, resourceName, fieldKey }: Props) {
+  const input = useRef<HTMLInputElement>(null);
+  const helpId = useId();
+  const instructionId = useId();
+  const [upload, setUpload] = useState<Upload | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [status, setStatus] = useState("");
+
+  const accepted = mimeTypesFor(field.accept);
+  const maxBytes = fileMaxBytes(field);
+  const help = `${capitalize(describeAccept(field.accept))}, up to ${formatBytes(maxBytes)}`;
+  const busy = upload !== null;
+
+  // Thumbnail for a stored image (a local preview replaces it while uploading).
+  useEffect(() => {
+    if (!value || !isImageKey(value)) return setPreview(null);
+    let cancelled = false;
+    void createReadUrlAction(resourceName, fieldKey, value).then((result) => {
+      if (!cancelled && result.ok) setPreview(result.data.url);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value, resourceName, fieldKey]);
+
+  async function check(file: File): Promise<string | null> {
+    const type = file.type || "application/octet-stream";
+    if (!matchesContentType(type, accepted)) return `${field.label} accepts ${describeAccept(field.accept)} files.`;
+    if (file.size > maxBytes) return `${file.name} is ${formatBytes(file.size)}; the limit is ${formatBytes(maxBytes)}.`;
+    const head = new Uint8Array(await file.slice(0, SNIFF_BYTES).arrayBuffer());
+    if (sniffMatches(type, head) === false) {
+      return `${file.name} isn't a valid ${typeName(type)} file. It may have been renamed; choose the original file.`;
+    }
+    return null;
+  }
+
+  async function start(file: File) {
+    setError(null);
+    const problem = await check(file);
+    if (problem) return setError(problem);
+
+    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?.() });
+    if (localPreview) setPreview(localPreview);
+    setStatus(`Uploading ${file.name}…`);
+
+    try {
+      const signed = await createUploadUrlAction(resourceName, fieldKey, { name: file.name, type: file.type, 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);
+      setStatus(`${file.name} uploaded`);
+    } catch (cause) {
+      const cancelled = cause instanceof DOMException && cause.name === "AbortError";
+      if (!cancelled) setError(cause instanceof Error ? cause.message : "Upload failed.");
+      setStatus(cancelled ? "Upload cancelled" : "Upload failed");
+      if (localPreview) setPreview(null);
+    } finally {
+      if (localPreview) URL.revokeObjectURL(localPreview);
+      setUpload(null);
+      if (input.current) input.current.value = "";
+    }
+  }
+
+  async function open() {
+    const result = await createReadUrlAction(resourceName, fieldKey, value);
+    if (result.ok) window.open(result.data.url, "_blank", "noopener");
+    else setError(result.error);
+  }
+
+  function remove() {
+    setError(null);
+    setPreview(null);
+    onChange("");
+    setStatus("File removed");
+  }
+
+  const choose = () => input.current?.click();
+  const percent = upload && upload.total > 0 ? Math.round((upload.loaded / upload.total) * 100) : 0;
+
+  const dropHandlers = {
+    onDragOver: (event: React.DragEvent) => {
+      if (disabled || busy) return;
+      event.preventDefault();
+      setDragging(true);
+    },
+    onDragLeave: () => setDragging(false),
+    onDrop: (event: React.DragEvent) => {
+      event.preventDefault();
+      setDragging(false);
+      const file = event.dataTransfer.files[0];
+      if (file && !disabled && !busy) void start(file);
+    },
+  };
+
+  const thumbnail = (
+    <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted">
+      {preview ? (
+        // eslint-disable-next-line @next/next/no-img-element -- signed, short-lived URL
+        <img src={preview} alt="" width={40} height={40} className="size-full object-cover" />
+      ) : (
+        <FileIcon aria-hidden="true" className="size-5 text-muted-foreground" />
+      )}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* The native input only opens the file chooser; the visible button is the control
+          the field's label points at, so assistive tech sees one control, not two. */}
+      <input
+        ref={input}
+        type="file"
+        accept={accepted.join(",")}
+        className="sr-only"
+        tabIndex={-1}
+        aria-hidden="true"
+        disabled={disabled || busy}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) void start(file);
+        }}
+      />
+
+      {upload ? (
+        <div className="flex items-center gap-3 rounded-lg border p-3">
+          {thumbnail}
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+            <div className="flex items-baseline justify-between gap-2 text-sm">
+              <span className="truncate font-medium">{upload.name}</span>
+              <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                {formatBytes(upload.loaded)} of {formatBytes(upload.total)}
+              </span>
+            </div>
+            <Progress value={percent} aria-label={`Uploading ${upload.name}`} />
+          </div>
+          <Button type="button" variant="ghost" size="sm" onClick={upload.abort}>
+            Cancel upload
+          </Button>
+        </div>
+      ) : value ? (
+        <div
+          {...dropHandlers}
+          className={cn("flex items-center gap-3 rounded-lg border p-3", dragging && "border-primary bg-muted")}
+          data-invalid={invalid || undefined}
+        >
+          {thumbnail}
+          <span className="min-w-0 flex-1 truncate text-sm font-medium">{fileName(value)}</span>
+          <div className="flex shrink-0 gap-1">
+            <Button type="button" variant="ghost" size="sm" onClick={open}>
+              Open<span className="sr-only"> {fileName(value)}</span>
+            </Button>
+            {/* The field label points here; aria-label keeps the button named for what it does. */}
+            <Button
+              id={id}
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={disabled}
+              onClick={choose}
+              aria-label={`Replace ${field.label.toLowerCase()} file`}
+            >
+              Replace
+            </Button>
+            {!field.required && (
+              <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={remove}>
+                Remove<span className="sr-only"> {field.label.toLowerCase()} file</span>
+              </Button>
+            )}
+          </div>
+        </div>
+      ) : (
+        <button
+          id={id}
+          type="button"
+          {...dropHandlers}
+          onClick={choose}
+          disabled={disabled}
+          aria-describedby={`${instructionId} ${helpId}`}
+          aria-invalid={invalid || Boolean(error) || undefined}
+          className={cn(
+            "flex w-full items-center gap-3 rounded-lg border border-dashed p-3 text-left transition-colors outline-none motion-reduce:transition-none",
+            "hover:bg-muted focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+            dragging ? "border-primary bg-muted" : (invalid || error) && "border-destructive",
+          )}
+        >
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted">
+            <UploadIcon aria-hidden="true" className="size-5 text-muted-foreground" />
+          </div>
+          <span className="flex flex-col">
+            <span id={instructionId} className="text-sm font-medium">
+              {dragging ? "Drop to upload" : "Choose a file or drop it here"}
+            </span>
+            <span id={helpId} className="text-xs text-muted-foreground">
+              {help}
+            </span>
+          </span>
+        </button>
+      )}
+
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      <span className="sr-only" aria-live="polite">
+        {status}
+      </span>
+    </div>
+  );
+}