create-nevela 0.5.0 → 0.5.2

package/template/web/app/dashboard/actions.ts

@@ -4,7 +4,9 @@ import { revalidatePath } from "next/cache";
 import { storedFields, type PolicyAction } from "@flaredev/core";
 import type { FieldIssue } from "@/lib/resource/store";
 import { toCsv } from "@/lib/csv";
+import { revalidateResource } from "@/lib/cache";
 import { fileUrl } from "@/lib/files";
+import { laravel } from "@/lib/laravel";
 import { allResources, resourcePath, dashboardSession, dashboardStore, mayDo } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
@@ -103,6 +105,83 @@ export async function createRecordAction(resourceName: string, input: unknown):
   return result;
 }
 
+export type InsightsUnit = "day" | "week" | "month";
+
+export interface InsightsData {
+  /** Everything the list matches, whenever it was created. */
+  total: number;
+  unit: InsightsUnit;
+  /** How many were created in each period, oldest first. A day or a week is "2026-10-05" (a week by its Monday), a month "2026-10". */
+  series: { bucket: string; count: number }[];
+  /** How the records split across each field that is a choice. */
+  breakdown: { field: string; kind: "enum" | "boolean"; slices: { value: string; count: number }[] }[];
+}
+
+/**
+ * The counts behind the insights panel: `GET /{slug}/_insights`.
+ *
+ * `query` is the list's own search and filters, so the charts are of the rows the table
+ * is showing. Asked for only when the panel is opened.
+ */
+export async function resourceInsightsAction(resourceName: string, query: string, unit: InsightsUnit): Promise<ActionResult<InsightsData>> {
+  const denied = await allowed(resourceName, "read");
+  if (denied) return denied;
+
+  const { resource } = dashboardStore(resourceName);
+  const params = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(query)) if (key === "q" || key.startsWith("filter[")) params.append(key, value);
+  params.set("unit", unit);
+  const response = await laravel(`${resource.slug}/_insights?${params}`);
+  if (!response.ok) {
+    const body = (response.body ?? {}) as { error?: string };
+    // An app whose Laravel side is from before this existed has no such address.
+    const missing = response.status === 404 || response.status === 405;
+    return { ok: false, status: response.status, error: missing ? "This app's API has no insights yet. Run: nevela upgrade" : (body.error ?? "Request failed.") };
+  }
+  return { ok: true, data: response.body as InsightsData };
+}
+
+/** What was wrong with one row of several, numbered from 1 among the rows that were sent. */
+export interface RowProblem {
+  row: number;
+  issues: FieldIssue[];
+}
+
+export type CreateManyResult = { ok: true; data: { created: number } } | { ok: false; status: number; error: string; rows?: RowProblem[] };
+
+/**
+ * Several records at once, for the "Add several" grid: `POST /{slug}/_bulk`.
+ *
+ * Laravel checks every row with the rules it uses for one, and saves them in a single
+ * transaction. So the answer is all of them, or none and the rows that were wrong.
+ */
+export async function createManyAction(resourceName: string, rows: Record<string, unknown>[]): Promise<CreateManyResult> {
+  const denied = await allowed(resourceName, "create");
+  if (denied) return denied;
+  if (rows.length === 0) return { ok: false, status: 400, error: "Nothing to create: every row is empty." };
+
+  const { resource } = dashboardStore(resourceName);
+  const response = await laravel(`${resource.slug}/_bulk`, { method: "POST", body: { items: rows } });
+  const body = (response.body ?? {}) as { error?: string; rows?: RowProblem[]; created?: number; data?: { id?: unknown }[] };
+  if (!response.ok) {
+    return {
+      ok: false,
+      status: response.status,
+      // An app whose Laravel side is from before this existed answers 404 or 405.
+      error: response.status === 404 || response.status === 405 ? "This app's API can't create several at once yet. Run: nevela upgrade" : (body.error ?? "Request failed."),
+      ...(body.rows ? { rows: body.rows } : {}),
+    };
+  }
+
+  try {
+    revalidateResource({ resource: resource.name, action: "create", id: String(body.data?.[0]?.id ?? "") });
+  } catch (error) {
+    console.error(`[nevela] ${resource.name} bulk create cache invalidation failed:`, error);
+  }
+  revalidatePath(resourcePath(resource));
+  return { ok: true, data: { created: body.created ?? rows.length } };
+}
+
 export async function updateRecordAction(resourceName: string, id: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
   const denied = await allowed(resourceName, "update");
   if (denied) return denied;

package/template/web/app/page.tsx

@@ -114,15 +114,9 @@ export default function Home() {
           <p>
             © {new Date().getFullYear()} {site.name}
           </p>
-          {/* Delete this line when the app is your own — it's here so whoever set the
-              project up can find what running it actually costs. */}
-          <a
-            href="https://flare-docs.codetotech.com/guides/costs/"
-            target="_blank"
-            rel="noreferrer"
-            className="hover:text-foreground"
-          >
-            Built with Flare · what it costs to run
+          {/* Delete this line when the app is your own. */}
+          <a href="https://nevela-docs.vercel.app" target="_blank" rel="noreferrer" className="hover:text-foreground">
+            Built with Nevela (Next.js + Laravel)
           </a>
           <nav aria-label="Footer" className="flex gap-6">
             <Link href={site.links.terms} className="hover:text-foreground">

package/template/web/components/dashboard/bulk-create-grid.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo, useRef, useState, useTransition } from "react";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
+import { ListPlusIcon, PlusIcon, XIcon } from "lucide-react";
+import { toast } from "sonner";
+import { createManyAction } from "@/app/dashboard/actions";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { FieldWidget, type RelationMeta } from "./fields/field-widget";
+
+type FieldDef = StoredField & { label: string };
+type Values = Record<string, string | boolean>;
+type Relations = Record<string, RelationMeta & { initialTitle?: string }>;
+
+interface Row {
+  /** Stays with the row as others are added and removed around it. */
+  key: number;
+  values: Values;
+}
+
+/**
+ * Enough to see that more can be added, and few enough not to look like a form to fill
+ * in. An empty grid gives nothing to type into; one row means clicking "Add row" before
+ * you have begun.
+ */
+const STARTING_ROWS = 5;
+
+/**
+ * Where the grid stops adding rows: what Laravel accepts in one request unless an app
+ * changes it (config/nevela.php, bulk_max). An app that sets it lower is still safe:
+ * Laravel refuses the larger request, and its message, which says the limit, is shown.
+ */
+const MOST_ROWS = 500;
+
+/** Kinds that fit in a cell: one control, one value. A file needs its own upload, so it is left to the form. */
+const IN_A_CELL = new Set(["string", "text", "int", "float", "boolean", "date", "datetime", "enum", "belongsTo"]);
+
+/**
+ * Add several records at once, in a grid.
+ *
+ * Between "New" and "Import". Import is for a file somebody already has, and New is for
+ * one record. This is for the twelve you have in your head or on a piece of paper, which
+ * until now meant opening the form twelve times.
+ *
+ * Rows left empty are ignored, so nobody has to delete the ones they didn't use. The rows
+ * that were filled in are saved together or not at all: Laravel checks every one first,
+ * and a mistake comes back against its row with nothing created.
+ */
+export function BulkCreateButton({ resource, relations = {} }: { resource: ClientResource; relations?: Relations }) {
+  const [open, setOpen] = useState(false);
+  const plural = resource.pluralLabel.toLowerCase();
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <ListPlusIcon data-icon="inline-start" />
+          Add several
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex max-h-[90vh] flex-col gap-4 sm:max-w-[min(96vw,84rem)]">
+        <DialogHeader>
+          <DialogTitle>Add several {plural}</DialogTitle>
+          <DialogDescription>One row for each. Rows you leave empty are ignored, and they are all saved together or not at all.</DialogDescription>
+        </DialogHeader>
+        {/* Mounted only while open, so what was typed and abandoned last time is gone. */}
+        {open && <Grid resource={resource} relations={relations} onDone={() => setOpen(false)} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Grid({ resource, relations, onDone }: { resource: ClientResource; relations: Relations; onDone: () => void }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const validators = useMemo(() => createValidators(resource), [resource]);
+  const all = useMemo(() => storedFields(resource) as [string, FieldDef][], [resource]);
+  const fields = useMemo(() => all.filter(([, def]) => IN_A_CELL.has(def.kind)), [all]);
+  // A field this grid can't show and Laravel requires would fail every row, with nothing
+  // on screen to fix. Say so, and leave those records to the form.
+  const missing = useMemo(() => all.filter(([, def]) => !IN_A_CELL.has(def.kind) && def.required !== false), [all]);
+
+  const blank = useMemo(() => initialFormValues(resource, null) as Values, [resource]);
+  const nextKey = useRef(STARTING_ROWS);
+  const [rows, setRows] = useState<Row[]>(() => Array.from({ length: STARTING_ROWS }, (_, key) => ({ key, values: { ...blank } })));
+  /** Problems by row key, then by field. "" holds what isn't about one field. */
+  const [problems, setProblems] = useState<Record<number, Record<string, string>>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  // A row is empty when it is exactly as it started: a tick box left unticked is not an entry.
+  const isEmpty = (values: Values) => fields.every(([key]) => values[key] === blank[key]);
+  const filled = rows.filter((row) => !isEmpty(row.values));
+  const noun = filled.length === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase();
+
+  function change(rowKey: number, field: string, value: string | boolean) {
+    setRows((current) => current.map((row) => (row.key === rowKey ? { ...row, values: { ...row.values, [field]: value } } : row)));
+    if (problems[rowKey]?.[field]) {
+      setProblems(({ [rowKey]: row = {}, ...rest }) => {
+        const { [field]: _fixed, ...others } = row;
+        return Object.keys(others).length > 0 ? { ...rest, [rowKey]: others } : rest;
+      });
+    }
+  }
+
+  function addRows(count: number) {
+    setRows((current) => [...current, ...Array.from({ length: Math.min(count, MOST_ROWS - current.length) }, () => ({ key: nextKey.current++, values: { ...blank } }))]);
+  }
+
+  function removeRow(rowKey: number) {
+    setRows((current) => (current.length > 1 ? current.filter((row) => row.key !== rowKey) : [{ key: nextKey.current++, values: { ...blank } }]));
+    setProblems(({ [rowKey]: _gone, ...rest }) => rest);
+  }
+
+  function save() {
+    setError(null);
+    if (filled.length === 0) {
+      setError("Nothing to create yet: every row is empty.");
+      return;
+    }
+    // Checked here first with the descriptor's own rules, so most mistakes never leave the page.
+    const found: Record<number, Record<string, string>> = {};
+    const inputs = filled.map((row) => {
+      const input = formValuesToInput(resource, row.values, "create") as Record<string, unknown>;
+      const parsed = validators.create.safeParse(input);
+      if (!parsed.success) {
+        const visible = Object.fromEntries(Object.entries(issuesByField(parsed.error.issues)).filter(([key]) => fields.some(([field]) => field === key)));
+        if (Object.keys(visible).length > 0) found[row.key] = visible;
+      }
+      // Only what the grid shows is sent; a field it can't show is left for Laravel to judge.
+      return Object.fromEntries(Object.entries(input).filter(([key]) => fields.some(([field]) => field === key)));
+    });
+    if (Object.keys(found).length > 0) {
+      setProblems(found);
+      setError(Object.keys(found).length === 1 ? "One row needs fixing." : `${Object.keys(found).length} rows need fixing.`);
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await createManyAction(resource.name, inputs);
+      if (result.ok) {
+        toast.success(`${result.data.created} ${result.data.created === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase()} created.`);
+        onDone();
+        router.refresh();
+        return;
+      }
+      // Laravel numbers the rows it was sent, which are only the ones filled in. Here a
+      // row is called by its number on screen, so every number it mentions is translated.
+      const onScreen = (sent: number) => {
+        const row = filled[sent - 1];
+        return row ? rows.findIndex((candidate) => candidate.key === row.key) + 1 : sent;
+      };
+      const fromServer: Record<number, Record<string, string>> = {};
+      const numbers: number[] = [];
+      for (const problem of result.rows ?? []) {
+        const row = filled[problem.row - 1];
+        if (!row) continue;
+        numbers.push(onScreen(problem.row));
+        fromServer[row.key] = {};
+        for (const issue of problem.issues) {
+          const field = issue.path.split(".")[0] ?? "";
+          const known = fields.some(([key]) => key === field);
+          const label = all.find(([key]) => key === field)?.[1].label;
+          const message = issue.message.replace(/\brow (\d+)\b/g, (_, sent: string) => `row ${onScreen(Number(sent))}`);
+          // A problem with a field that has no column here is said beside the row instead.
+          fromServer[row.key]![known ? field : ""] ??= known || !label ? message : `${label}: ${message}`;
+        }
+      }
+      setProblems(fromServer);
+      setError(numbers.length === 0 ? result.error : numbers.length === 1 ? `Nothing was created: row ${numbers[0]} needs fixing.` : `Nothing was created: ${numbers.length} rows need fixing.`);
+    });
+  }
+
+  return (
+    <>
+      {missing.length > 0 && (
+        <Alert>
+          <AlertDescription>
+            {missing.map(([, def]) => def.label).join(", ")} {missing.length === 1 ? "is" : "are"} required and can&apos;t be filled in here, so these rows would be
+            refused. Use New {resource.label.toLowerCase()} for {resource.pluralLabel.toLowerCase()} instead.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-auto rounded-md border">
+        <table className="w-full border-collapse text-sm">
+          <thead className="sticky top-0 z-10 bg-muted text-left text-muted-foreground">
+            <tr>
+              <th scope="col" className="w-10 px-2 py-2 text-center font-medium">
+                #
+              </th>
+              {fields.map(([key, def]) => (
+                <th key={key} scope="col" className={cn("px-2 py-2 font-medium whitespace-nowrap", def.kind === "boolean" ? "w-24 text-center" : "min-w-44")}>
+                  {def.label}
+                  {def.required !== false && def.kind !== "boolean" && (
+                    <span className="text-destructive" aria-label="required">
+                      {" "}
+                      *
+                    </span>
+                  )}
+                </th>
+              ))}
+              <th scope="col" className="w-10">
+                <span className="sr-only">Remove</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, index) => {
+              const wrong = problems[row.key] ?? {};
+              const messages = Object.entries(wrong).map(([field, message]) => {
+                const label = fields.find(([key]) => key === field)?.[1].label;
+                return label ? `${label}: ${message}` : message;
+              });
+              return (
+                <tr key={row.key} className="border-t align-top">
+                  <td className="px-2 py-3 text-center text-muted-foreground tabular-nums">{index + 1}</td>
+                  {fields.map(([key, def]) => (
+                    <td key={key} className={cn("px-1.5 py-1.5", def.kind === "boolean" && "text-center")}>
+                      <Cell
+                        id={`bulk-${row.key}-${key}`}
+                        resourceName={resource.name}
+                        fieldKey={key}
+                        field={def}
+                        label={`${def.label}, row ${index + 1}`}
+                        value={row.values[key] ?? ""}
+                        invalid={Boolean(wrong[key])}
+                        disabled={pending}
+                        relation={relations[key]}
+                        onChange={(value) => change(row.key, key, value)}
+                      />
+                      {/* Said under the cell it is about. One with no cell of its own goes under the first. */}
+                      {key === fields[0]?.[0] && messages.length > 0 && (
+                        <p role="alert" className="mt-1 w-max max-w-[60vw] text-left text-xs text-destructive">
+                          {messages.join(" · ")}
+                        </p>
+                      )}
+                    </td>
+                  ))}
+                  <td className="px-1 py-1.5">
+                    <Button type="button" variant="ghost" size="icon-sm" aria-label={`Remove row ${index + 1}`} disabled={pending} onClick={() => removeRow(row.key)}>
+                      <XIcon />
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" variant="outline" size="sm" disabled={pending || rows.length >= MOST_ROWS} onClick={() => addRows(1)}>
+          <PlusIcon data-icon="inline-start" />
+          Add row
+        </Button>
+        <Button type="button" variant="ghost" size="sm" disabled={pending || rows.length >= MOST_ROWS} onClick={() => addRows(5)}>
+          Add 5 rows
+        </Button>
+        {error && (
+          <p role="alert" className="text-sm text-destructive">
+            {error}
+          </p>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button type="button" variant="ghost" disabled={pending} onClick={onDone}>
+          Cancel
+        </Button>
+        <Button type="button" disabled={pending || filled.length === 0 || missing.length > 0} onClick={save}>
+          {pending && <Spinner />}
+          {filled.length === 0 ? `Create ${resource.pluralLabel.toLowerCase()}` : `Create ${filled.length} ${noun}`}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+/**
+ * One cell. Long text is a single line here and a tick box is a tick box: a grid is for
+ * typing across, and a four-line text area or a labelled switch in every row is neither
+ * quick nor readable. Everything else is the form's own control, so a date, a price or a
+ * link to another record behaves exactly as it does there.
+ */
+function Cell({
+  id,
+  resourceName,
+  fieldKey,
+  field,
+  label,
+  value,
+  invalid,
+  disabled,
+  relation,
+  onChange,
+}: {
+  id: string;
+  resourceName: string;
+  fieldKey: string;
+  field: FieldDef;
+  label: string;
+  value: string | boolean;
+  invalid: boolean;
+  disabled: boolean;
+  relation?: RelationMeta & { initialTitle?: string };
+  onChange: (value: string | boolean) => void;
+}) {
+  if (field.kind === "boolean") {
+    return <Checkbox id={id} aria-label={label} checked={value === true} disabled={disabled} onCheckedChange={(checked) => onChange(checked === true)} className="mt-2" />;
+  }
+  if (field.kind === "text") {
+    return <Input id={id} aria-label={label} value={typeof value === "string" ? value : ""} disabled={disabled} aria-invalid={invalid || undefined} onChange={(event) => onChange(event.target.value)} />;
+  }
+  return (
+    <div aria-label={label} role="group">
+      <FieldWidget id={id} name={id} resourceName={resourceName} fieldKey={fieldKey} field={field} value={value} onChange={onChange} invalid={invalid} disabled={disabled} relation={relation} />
+    </div>
+  );
+}

package/template/web/components/dashboard/resource-insights.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useEffect, useId, useMemo, useState } from "react";
+import { optionLabel, type ClientResource } from "@flaredev/core";
+import { BarChart3Icon, ChevronDownIcon } from "lucide-react";
+import { resourceInsightsAction, type InsightsData, type InsightsUnit } from "@/app/dashboard/actions";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+
+const UNITS: { key: InsightsUnit; label: string; per: string; span: string }[] = [
+  { key: "day", label: "Daily", per: "day", span: "the last 30 days" },
+  { key: "week", label: "Weekly", per: "week", span: "the last 26 weeks" },
+  { key: "month", label: "Monthly", per: "month", span: "the last 12 months" },
+];
+
+/** A period as someone would say it: "9 Oct", "the week of 5 Oct", "Oct 2026". */
+function periodLabel(unit: InsightsUnit, bucket: string, long = false): string {
+  // UTC throughout: a bucket is a calendar day or month, not a moment, and must not slide a day in another timezone.
+  const date = new Date(`${unit === "month" ? `${bucket}-01` : bucket}T00:00:00Z`);
+  if (unit === "month") return new Intl.DateTimeFormat("en-GB", { month: "short", year: "numeric", timeZone: "UTC" }).format(date);
+  const day = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", ...(long ? { year: "numeric" } : {}), timeZone: "UTC" }).format(date);
+  return unit === "week" && long ? `the week of ${day}` : day;
+}
+
+/**
+ * Charts above a list, closed until somebody wants them.
+ *
+ * Closed is the default on purpose. The panel's numbers are a grouped query each over
+ * everything the list matches, which is work an ordinary visit to a list doesn't need.
+ * So nothing is asked for until it is opened, and whether it was left open is remembered
+ * for the next visit.
+ *
+ * What it charts is the rows the table is showing: the same search and filters go on the
+ * request, so narrowing the list to one category redraws the charts for that category.
+ *
+ * Drawn with plain elements and no chart library: bars are all these are, and a library
+ * for bars would be several hundred kilobytes to draw rectangles.
+ */
+export function ResourceInsights({ resource, total }: { resource: ClientResource; /** The list's own count: when it changes, so have the charts. */ total: number }) {
+  const panel = useId();
+  const remembered = `nevela.insights.${resource.name}`;
+  const [open, setOpen] = useState(false);
+  const [unit, setUnit] = useState<InsightsUnit>("day");
+  const [data, setData] = useState<InsightsData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Only what narrows the list. A page number or a sort order changes no count.
+  const params = useSearchParams();
+  const narrowed = useMemo(() => {
+    const kept = new URLSearchParams();
+    for (const [key, value] of params) if (key === "q" || key.startsWith("filter[")) kept.append(key, value);
+    kept.sort();
+    return kept.toString();
+  }, [params]);
+
+  // Read after the first paint: the server can't know what this browser remembers.
+  useEffect(() => {
+    try {
+      if (window.localStorage.getItem(remembered) === "open") setOpen(true);
+    } catch {
+      // No storage (a private window, or it is switched off): it just starts closed.
+    }
+  }, [remembered]);
+
+  function toggle() {
+    const next = !open;
+    setOpen(next);
+    try {
+      window.localStorage.setItem(remembered, next ? "open" : "closed");
+    } catch {
+      // Not remembered, and that is all.
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    let current = true;
+    setLoading(true);
+    void resourceInsightsAction(resource.name, narrowed, unit).then((result) => {
+      if (!current) return;
+      setLoading(false);
+      if (result.ok) {
+        setData(result.data);
+        setError(null);
+      } else {
+        setError(result.error);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [open, unit, narrowed, total, resource.name]);
+
+  const chosen = UNITS.find((entry) => entry.key === unit)!;
+  const plural = resource.pluralLabel.toLowerCase();
+
+  return (
+    <section className="rounded-xl border bg-card">
+      <button type="button" onClick={toggle} aria-expanded={open} aria-controls={panel} className="flex w-full items-center gap-2 rounded-xl px-4 py-3 text-left text-sm font-medium hover:bg-muted/50">
+        <BarChart3Icon className="size-4 text-muted-foreground" />
+        Insights
+        <span className="truncate font-normal text-muted-foreground">{narrowed ? `for the ${plural} this list is showing` : `when ${plural} were created, and how they split`}</span>
+        {loading && <Spinner className="ml-1" />}
+        <ChevronDownIcon className={cn("ml-auto size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <div id={panel} className="border-t p-4">
+          {error && !data && (
+            <p role="alert" className="text-sm text-destructive">
+              {error}
+            </p>
+          )}
+          {!data && !error && <p className="text-sm text-muted-foreground">Counting…</p>}
+          {data && (
+            <div className={cn("grid gap-x-10 gap-y-8", data.breakdown.length > 0 && "lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]", loading && "opacity-60")}>
+              <div className="flex min-w-0 flex-col gap-3">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <p className="text-sm">
+                    <span className="font-medium">Created per {chosen.per}</span> <span className="text-muted-foreground">· {chosen.span}</span>
+                  </p>
+                  <div role="group" aria-label="Period" className="flex rounded-md border p-0.5 text-xs">
+                    {UNITS.map((entry) => (
+                      <button
+                        key={entry.key}
+                        type="button"
+                        aria-pressed={entry.key === unit}
+                        onClick={() => setUnit(entry.key)}
+                        className={cn("rounded px-2 py-1", entry.key === unit ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground")}
+                      >
+                        {entry.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <Series unit={data.unit} series={data.series} noun={plural} />
+              </div>
+
+              {data.breakdown.length > 0 && (
+                <div className="flex min-w-0 flex-col gap-6">
+                  {data.breakdown.map((group) => (
+                    <Breakdown key={group.field} resource={resource} group={group} />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function Series({ unit, series, noun }: { unit: InsightsUnit; series: InsightsData["series"]; noun: string }) {
+  const most = Math.max(0, ...series.map((point) => point.count));
+  const sum = series.reduce((all, point) => all + point.count, 0);
+  const peak = series.find((point) => point.count === most);
+  const middle = series[Math.floor(series.length / 2)];
+  const summary =
+    sum === 0 || !peak
+      ? `No ${noun} were created in this time.`
+      : `${sum.toLocaleString()} created in this time. The most was ${most.toLocaleString()}, ${unit === "day" ? "on" : "in"} ${periodLabel(unit, peak.bucket, true)}.`;
+
+  return (
+    <figure className="flex flex-col gap-2">
+      <div role="img" aria-label={summary} className="flex h-40 items-end gap-0.5 border-b pb-px">
+        {series.map((point) => (
+          <div key={point.bucket} title={`${point.count.toLocaleString()} · ${periodLabel(unit, point.bucket, true)}`} className="group flex h-full min-w-0 flex-1 items-end">
+            <div
+              // A count of one in a tall chart still has to be seen: never thinner than a hairline.
+              style={{ height: most > 0 && point.count > 0 ? `max(${(point.count / most) * 100}%, 3px)` : "1px" }}
+              className={cn("w-full rounded-t-sm", point.count > 0 ? "bg-primary/75 group-hover:bg-primary" : "bg-border")}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between text-xs text-muted-foreground tabular-nums" aria-hidden="true">
+        <span>{series[0] && periodLabel(unit, series[0].bucket)}</span>
+        <span>{middle && periodLabel(unit, middle.bucket)}</span>
+        <span>{series.at(-1) && periodLabel(unit, series.at(-1)!.bucket)}</span>
+      </div>
+      <figcaption className="text-xs text-muted-foreground">{summary}</figcaption>
+    </figure>
+  );
+}
+
+function Breakdown({ resource, group }: { resource: ClientResource; group: InsightsData["breakdown"][number] }) {
+  const def = resource.fields[group.field];
+  const sum = group.slices.reduce((all, slice) => all + slice.count, 0);
+  const name = (value: string) => {
+    if (value === "") return "Not set";
+    if (group.kind === "boolean") return value === "true" ? "Yes" : "No";
+    return def && def.kind === "enum" ? optionLabel(def, value) : value;
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-sm font-medium">{def && "label" in def && def.label ? String(def.label) : group.field}</p>
+      <ul className="flex flex-col gap-1.5">
+        {group.slices.map((slice) => {
+          const share = sum > 0 ? (slice.count / sum) * 100 : 0;
+          return (
+            <li key={slice.value} className="grid grid-cols-[minmax(4rem,7rem)_1fr_auto] items-center gap-3 text-sm">
+              <span className="truncate text-muted-foreground">{name(slice.value)}</span>
+              <span className="h-2 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+                <span className="block h-full rounded-full bg-primary/75" style={{ width: `${share}%` }} />
+              </span>
+              <span className="tabular-nums">
+                {slice.count.toLocaleString()} <span className="text-muted-foreground">· {Math.round(share)}%</span>
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}