create-nevela 0.8.0 → 0.9.2

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

@@ -8,7 +8,7 @@ import { revalidateResource } from "@/lib/cache";
 import { fileUrl } from "@/lib/files";
 import { laravel } from "@/lib/laravel";
 import { allResources, resourcePath, dashboardSession, dashboardStore, mayDo } from "@/lib/dashboard";
-import { actionsOf } from "@/lib/extras";
+import { actionsOf, formOf, publishFieldOf } from "@/lib/extras";
 
 export type ActionResult<T = unknown> =
   | { ok: true; data: T }
@@ -111,8 +111,11 @@ export async function exportRecordsAction(resourceName: string, query: string):
 
   const rows: Record<string, unknown>[] = [];
   let truncated = false;
+  // Someone who joined a list and hasn't proved their address isn't on it yet.
+  const confirmedOnly = formOf(resourceName)?.confirm !== undefined && !new URLSearchParams(query).has("filter[confirmed]");
   for (let page = 1; rows.length < EXPORT_LIMIT; page++) {
     const params = new URLSearchParams(query);
+    if (confirmedOnly) params.set("filter[confirmed]", "true");
     params.set("page", String(page));
     params.set("perPage", String(EXPORT_PAGE));
     const result = await store.list(params);
@@ -226,6 +229,17 @@ export async function updateRecordAction(resourceName: string, id: string, input
   return result;
 }
 
+/**
+ * Publish a record now, or take it back to a draft: its publish date is set to this
+ * moment, or cleared. An edit like any other, so it takes the permission to edit, and
+ * Laravel's policy has the last word.
+ */
+export async function publishRecordAction(resourceName: string, id: string, publish: boolean): Promise<ActionResult<Record<string, unknown>>> {
+  const field = publishFieldOf(resourceName);
+  if (!field) return { ok: false, status: 404, error: "This isn't something that is published." };
+  return updateRecordAction(resourceName, id, { [field]: publish ? new Date().toISOString() : null });
+}
+
 /**
  * Where the browser sends a file for a file or image field.
  *

package/template/web/components/dashboard/form-activity.tsx

@@ -0,0 +1,53 @@
+import type { Resource } from "@flaredev/core";
+import { ShieldCheckIcon } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { formOf } from "@/lib/extras";
+import { laravel } from "@/lib/laravel";
+
+/** GET _nevela/forms/<slug>: what a resource's public form checks and has turned away. */
+interface FormReport {
+  robotCheck: "on" | "off" | "skipped" | "refusing";
+  blocked: { total: number; days: number; reasons: { reason: string; label: string; count: number }[] };
+}
+
+/**
+ * What a resource's public form turned away this week, above its table: "Blocked this
+ * week: 132 (118 robot check, 14 throwaway address)". Without it a form that is well
+ * protected and a form nobody uses look the same from in here.
+ *
+ * Shown for a resource whose descriptor has "protect", and says so plainly when the
+ * robot check it asks for isn't being made.
+ */
+export async function FormActivity({ resource }: { resource: Resource }) {
+  if (!formOf(resource.name)?.protect) return null;
+  const response = await laravel(`_nevela/forms/${resource.slug}`);
+  if (!response.ok) return null;
+  const { robotCheck, blocked } = response.body as FormReport;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {robotCheck === "refusing" && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            The public form is refusing everyone: it asks for the robot check, and TURNSTILE_SECRET_KEY isn&apos;t set in the API. Set it, or take
+            &quot;turnstile&quot; out of the descriptor.
+          </AlertDescription>
+        </Alert>
+      )}
+      {robotCheck === "skipped" && (
+        <Alert>
+          <AlertDescription>
+            The robot check is skipped while TURNSTILE_SECRET_KEY isn&apos;t set. That is fine in development. Set it before the site goes live.
+          </AlertDescription>
+        </Alert>
+      )}
+      <p className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ShieldCheckIcon className="size-4 shrink-0" aria-hidden="true" />
+        <span>
+          Blocked this week: <span className="font-medium text-foreground tabular-nums">{blocked.total === 0 ? "none" : blocked.total.toLocaleString()}</span>
+          {blocked.total > 0 && ` (${blocked.reasons.map((row) => `${row.count.toLocaleString()} ${row.label}`).join(", ")})`}
+        </span>
+      </p>
+    </div>
+  );
+}

package/template/web/components/dashboard/record-actions.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { PencilIcon, Trash2Icon } from "lucide-react";
+import { EyeOffIcon, PencilIcon, SendIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
-import { deleteRecordAction } from "@/app/dashboard/actions";
+import { deleteRecordAction, publishRecordAction } from "@/app/dashboard/actions";
 import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import type { ResourceAction } from "@/lib/extras";
+import type { PublishState, ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
 import { ActionButtons } from "./resource-action";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
@@ -40,11 +40,23 @@ interface Props {
   trash?: TrashInfo;
   /** The resource's own actions that this person may run and that apply to this record as it is. */
   actions?: ResourceAction[];
+  /** For a resource with a publish date: what this record is now, so the right one of Publish and Unpublish is offered. */
+  published?: PublishState;
 }
 
-/** The resource's own actions, then 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, overlayForms, trash, actions = [] }: Props) {
+/** Publishing, the resource's own actions, then 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, overlayForms, trash, actions = [], published }: Props) {
   const router = useRouter();
+  const [publishing, startPublishing] = useTransition();
+
+  const publish = (now: boolean) => {
+    startPublishing(async () => {
+      const result = await publishRecordAction(resource.name, id, now);
+      if (result.ok) toast.success(now ? `${resource.label} published.` : `${resource.label} is a draft again.`);
+      else toast.error(result.error);
+      router.refresh();
+    });
+  };
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const [pending, startTransition] = useTransition();
@@ -67,6 +79,18 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
 
   return (
     <>
+      {canUpdate && published && published !== "published" && (
+        <Button disabled={publishing} onClick={() => publish(true)}>
+          {publishing ? <Spinner data-icon="inline-start" /> : <SendIcon data-icon="inline-start" />}
+          {published === "scheduled" ? "Publish now" : "Publish"}
+        </Button>
+      )}
+      {canUpdate && published === "published" && (
+        <Button variant="outline" disabled={publishing} onClick={() => publish(false)}>
+          {publishing ? <Spinner data-icon="inline-start" /> : <EyeOffIcon data-icon="inline-start" />}
+          Unpublish
+        </Button>
+      )}
       <ActionButtons resourceName={resource.name} actions={actions} id={id} />
       {canUpdate &&
         (overlayForms ? (

package/template/web/components/dashboard/record-detail.tsx

@@ -6,7 +6,7 @@ import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { adminPermissions, allowedActions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
-import { actionApplies } from "@/lib/extras";
+import { actionApplies, publishFieldOf, publishState } from "@/lib/extras";
 import { privateFileUrl } from "@/lib/files";
 import { isRich } from "@/lib/rich";
 import { site } from "@/lib/site";
@@ -97,6 +97,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             overlayForms={site.dashboard.forms === "sheet"}
             trash={trash}
             actions={(await allowedActions(resource.name)).filter((action) => action.on === "record" && actionApplies(action, record))}
+            published={publishFieldOf(resource.name) ? publishState(record[publishFieldOf(resource.name)!]) : undefined}
           />
         }
       />

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

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition, type FormEvent, type MouseEvent } from "react";
-import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, slugify, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
 import { toast } from "sonner";
 import { createRecordAction, updateRecordAction } from "@/app/dashboard/actions";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -70,8 +70,25 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
   const last = step === steps.length - 1;
   const visible = steps[step] ?? [];
 
+  /**
+   * Fields made from another (a slug from a title) and not yet typed in by hand. On a new
+   * record they follow their source as it is typed, so what Laravel would make is on
+   * show; once someone types in one, it is theirs. Never on an edit: a slug that is
+   * already an address doesn't move.
+   */
+  const [following, setFollowing] = useState<Set<string>>(
+    () => new Set(mode === "create" ? fields.filter(([, def]) => typeof (def as { from?: string }).from === "string").map(([key]) => key) : []),
+  );
+
   const setValue = (key: string, value: string | boolean) => {
-    setValues((current) => ({ ...current, [key]: value }));
+    setValues((current) => {
+      const next = { ...current, [key]: value };
+      for (const [made, def] of fields) {
+        if (following.has(made) && (def as { from?: string }).from === key) next[made] = slugify(String(value));
+      }
+      return next;
+    });
+    if (following.has(key)) setFollowing((current) => new Set([...current].filter((made) => made !== key)));
     if (errors[key]) setErrors(({ [key]: _removed, ...rest }) => rest);
   };
 

package/template/web/components/dashboard/resource-table-toolbar.tsx

@@ -12,7 +12,7 @@ import { hrefWith } from "./query";
 const ALL = "__all__";
 
 /** Search box and enum/boolean filters for ResourceTable; all state goes into the URL. */
-export function ResourceTableToolbar({ resource }: { resource: ClientResource }) {
+export function ResourceTableToolbar({ resource, publish }: { resource: ClientResource; publish?: { field: string; label: string } }) {
   const router = useRouter();
   const pathname = usePathname();
   const params = new URLSearchParams(useSearchParams().toString());
@@ -31,7 +31,7 @@ export function ResourceTableToolbar({ resource }: { resource: ClientResource })
     go({ q: q.trim() || null });
   }
 
-  if (!searchable && filters.length === 0) return null;
+  if (!searchable && filters.length === 0 && !publish) return null;
 
   return (
     <div className="flex flex-wrap items-center gap-2">
@@ -52,6 +52,24 @@ export function ResourceTableToolbar({ resource }: { resource: ClientResource })
         </form>
       )}
 
+      {/* For a resource with a publish date: which of the three a record is, not a date to match. */}
+      {publish && (
+        <Select value={params.get(`filter[${publish.field}]`) ?? ALL} onValueChange={(value) => go({ [`filter[${publish.field}]`]: value === ALL ? null : value })}>
+          <SelectTrigger className="min-w-36" aria-label="Filter by whether it is published">
+            <span className="text-muted-foreground">Status:</span>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value={ALL}>Any</SelectItem>
+              <SelectItem value="published">Published</SelectItem>
+              <SelectItem value="scheduled">Scheduled</SelectItem>
+              <SelectItem value="draft">Draft</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      )}
+
       {filters.map(([key, def]) => {
         const param = `filter[${key}]`;
         const options = def.kind === "enum" ? def.options.map((value) => ({ value, label: optionLabel(def, value) })) : [

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

@@ -19,12 +19,13 @@ import {
 } from "@/components/ui/pagination";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { resourcePath, adminPermissions, allowedActions, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
-import { actionApplies } from "@/lib/extras";
+import { actionApplies, formOf, PUBLISH_LABELS, publishFieldOf, publishState } from "@/lib/extras";
 import { site } from "@/lib/site";
 import { trashFor } from "@/lib/trash";
 import { cn } from "@/lib/utils";
 import { ColumnMenu } from "./column-menu";
 import { ExportButton } from "./export-button";
+import { FormActivity } from "./form-activity";
 import { isInlineEditable } from "./editable";
 import { InlineCell } from "./inline-cell";
 import type { RelationMeta } from "./fields/field-widget";
@@ -100,6 +101,11 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
   }
 
   const overlayForms = site.dashboard.forms === "sheet";
+  // The field this resource's records are published by, where it has one, and the time to judge them by.
+  const publishField = publishFieldOf(resource.name);
+  const now = new Date();
+  // The field holding an address its owner has to prove, where the public form asks for that.
+  const confirmField = formOf(resource.name)?.confirm;
   // The resource's own actions this person may run: on the list as a whole, and on a record.
   const actions = await allowedActions(resource.name);
   const onRecords = actions.filter((action) => action.on === "record");
@@ -117,8 +123,9 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
     <TableSelection ids={rowIds}>
       <div className="flex flex-col gap-4">
       <ResourceInsights resource={forClient} total={meta.total} />
+      <FormActivity resource={resource} />
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <ResourceTableToolbar resource={forClient} />
+        <ResourceTableToolbar resource={forClient} publish={publishField ? { field: publishField, label: resource.fields[publishField]?.label ?? "Published" } : undefined} />
         <div className="flex flex-wrap items-center gap-2">
           <ColumnMenu columns={allColumns.map(({ key, label }) => ({ key, label }))} visible={columns.map((column) => column.key)} />
           <ExportButton resourceName={resource.name} pluralLabel={resource.pluralLabel} />
@@ -216,7 +223,28 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                       let content: React.ReactNode = formatValue(column.def, value);
                       // Timestamps are formatted in the browser: the Worker's clock is UTC,
                       // so a date rendered here would be in nobody's timezone.
-                      if ((column.def.kind === "timestamp" || column.def.kind === "datetime") && value != null) {
+                      if (column.key === publishField) {
+                        // Not the raw date: what it means. A post is published, waiting for its time, or neither.
+                        const state = publishState(value, now);
+                        content = (
+                          <span className="inline-flex items-center gap-2">
+                            <Badge variant={state === "published" ? "success" : state === "scheduled" ? "warning" : "secondary"}>{PUBLISH_LABELS[state]}</Badge>
+                            {state !== "draft" && (
+                              <span className="text-xs text-muted-foreground">
+                                <LocalTime value={value as string} />
+                              </span>
+                            )}
+                          </span>
+                        );
+                      } else if (column.key === confirmField && row.confirmedAt == null) {
+                        // Joined through the form and hasn't followed the link yet: listed, and not counted or exported.
+                        content = (
+                          <span className="inline-flex items-center gap-2">
+                            {content}
+                            <Badge variant="warning">Not confirmed</Badge>
+                          </span>
+                        );
+                      } else if ((column.def.kind === "timestamp" || column.def.kind === "datetime") && value != null) {
                         content = <LocalTime value={value as string | number | Date} />;
                       } else if (column.def.kind === "enum" && value != null) {
                         const tone = statusTone(value);
@@ -316,6 +344,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                         canDelete={permissions.delete}
                         trash={trash}
                         actions={onRecords.filter((action) => actionApplies(action, row))}
+                        published={publishField ? publishState(row[publishField], now) : undefined}
                       />
                     </TableCell>
                   </TableRow>

package/template/web/components/dashboard/row-actions.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { ExternalLinkIcon, EyeOffIcon, MoreHorizontalIcon, PencilIcon, SendIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
-import { deleteRecordAction } from "@/app/dashboard/actions";
+import { deleteRecordAction, publishRecordAction } from "@/app/dashboard/actions";
 import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
@@ -27,7 +27,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
-import type { ResourceAction } from "@/lib/extras";
+import type { PublishState, ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
 import { actionIcon, useResourceActions } from "./resource-action";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
@@ -49,6 +49,7 @@ export function RowActions({
   canDelete = true,
   trash,
   actions = [],
+  published,
 }: {
   resource: ClientResource;
   id: string;
@@ -65,8 +66,19 @@ export function RowActions({
   trash?: TrashInfo;
   /** The resource's own actions that this person may run and that apply to this row. */
   actions?: ResourceAction[];
+  /** For a resource with a publish date: what this row is now. */
+  published?: PublishState;
 }) {
   const router = useRouter();
+  const [, startPublishing] = useTransition();
+  const publish = (now: boolean) => {
+    startPublishing(async () => {
+      const result = await publishRecordAction(resource.name, id, now);
+      if (result.ok) toast.success(now ? `${resource.label} published.` : `${resource.label} is a draft again.`);
+      else toast.error(result.error);
+      router.refresh();
+    });
+  };
   const own = useResourceActions(resource.name, { one: resource.label.toLowerCase(), many: resource.pluralLabel.toLowerCase() });
   const [confirming, setConfirming] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -105,6 +117,24 @@ export function RowActions({
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
+          {canUpdate && published && (
+            <>
+              <DropdownMenuGroup>
+                {published === "published" ? (
+                  <DropdownMenuItem onSelect={() => publish(false)}>
+                    <EyeOffIcon />
+                    Unpublish
+                  </DropdownMenuItem>
+                ) : (
+                  <DropdownMenuItem onSelect={() => publish(true)}>
+                    <SendIcon />
+                    {published === "scheduled" ? "Publish now" : "Publish"}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+            </>
+          )}
           {actions.length > 0 && (
             <>
               <DropdownMenuGroup>

package/template/web/components/marketing/site-header.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { BrandMark } from "@/components/auth/auth-shell";
+import { siteLinks } from "@/lib/extras";
 import { site } from "@/lib/site";
 
 /** The public site's top bar. Static on purpose: it doesn't read the session, so the home page can be cached. */
@@ -12,12 +13,18 @@ export function SiteHeader() {
           {site.name}
         </Link>
         <nav aria-label="Main" className="hidden items-center gap-7 text-sm text-foreground-muted md:flex">
-          <a href="#features" className="hover:text-foreground">
+          <a href="/#features" className="hover:text-foreground">
             Features
           </a>
-          <a href="#customers" className="hover:text-foreground">
+          <a href="/#customers" className="hover:text-foreground">
             Customers
           </a>
+          {/* What the app's resources have put on the site: a blog, when `nevela blog` has made one. */}
+          {siteLinks().map((link) => (
+            <Link key={link.href} href={link.href} className="hover:text-foreground">
+              {link.label}
+            </Link>
+          ))}
           <a href={site.links.support} className="hover:text-foreground">
             Contact
           </a>

package/template/web/components/public-form-guard.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import * as React from "react";
+import type { PublicForm } from "@/hooks/use-public-form";
+
+/** The part of Cloudflare's script this uses. */
+interface Turnstile {
+  render: (
+    element: HTMLElement,
+    options: { sitekey: string; action?: string; callback: (token: string) => void; "expired-callback": () => void; "error-callback": () => void },
+  ) => string;
+  reset: (id: string) => void;
+  remove: (id: string) => void;
+}
+
+const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? "";
+const SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+
+let loading: Promise<Turnstile> | null = null;
+
+/** Cloudflare's script, asked for once however many forms a visit shows. */
+function turnstile(): Promise<Turnstile> {
+  const loaded = () => (window as unknown as { turnstile?: Turnstile }).turnstile;
+  loading ??= new Promise<Turnstile>((resolve, reject) => {
+    const existing = loaded();
+    if (existing) return resolve(existing);
+    const script = document.createElement("script");
+    script.src = SCRIPT;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      const ready = loaded();
+      if (ready) resolve(ready);
+      else reject(new Error("Turnstile didn't load."));
+    };
+    script.onerror = () => {
+      // Not kept: the next form to appear tries again.
+      loading = null;
+      script.remove();
+      reject(new Error("Turnstile didn't load."));
+    };
+    document.head.appendChild(script);
+  });
+  return loading;
+}
+
+/**
+ * What a protected form carries besides its own fields. Put it inside the form:
+ *
+ * ```tsx
+ * <PublicFormGuard form={form} />
+ * ```
+ *
+ * - The honeypot: a field a person never sees or reaches, and a bot fills in.
+ * - The robot check (Cloudflare Turnstile), where the descriptor asks for it and
+ *   NEXT_PUBLIC_TURNSTILE_SITE_KEY is set. Its answer is good once, so it starts over
+ *   after every attempt. With no site key there is no widget, and the form carries the
+ *   honeypot and its token only.
+ *
+ * The form's token is the hook's to send. Nothing here is the check itself: Laravel
+ * makes every one of them.
+ */
+export function PublicFormGuard({ form, className }: { form: PublicForm; className?: string }) {
+  const { honeypot, turnstile: asked, action, attempt, robot } = form.guard;
+  const holder = React.useRef<HTMLDivElement>(null);
+  const widget = React.useRef<string | null>(null);
+  const shown = asked && SITE_KEY !== "";
+
+  // Rendered by hand, not by the script on load: moving between pages here doesn't reload
+  // the document, so a widget the script found once would not be found again.
+  React.useEffect(() => {
+    if (!shown || !holder.current) return;
+    let current = true;
+    let api: Turnstile | null = null;
+    turnstile()
+      .then((ready) => {
+        if (!current || !holder.current) return;
+        api = ready;
+        widget.current = ready.render(holder.current, {
+          sitekey: SITE_KEY,
+          // Which form this check is for. Laravel refuses a token solved for another.
+          ...(action ? { action } : {}),
+          callback: (token) => robot(token),
+          "expired-callback": () => robot(null),
+          "error-callback": () => robot(null),
+        });
+      })
+      .catch(() => robot(null));
+    return () => {
+      current = false;
+      if (api && widget.current) api.remove(widget.current);
+      widget.current = null;
+      robot(null);
+    };
+  }, [shown, action, robot]);
+
+  // A used answer is refused the second time, so a corrected form needs a new one.
+  React.useEffect(() => {
+    if (attempt === 0 || !widget.current) return;
+    const api = (window as unknown as { turnstile?: Turnstile }).turnstile;
+    api?.reset(widget.current);
+  }, [attempt]);
+
+  React.useEffect(() => {
+    if (asked && SITE_KEY === "" && process.env.NODE_ENV !== "production") {
+      console.warn("This form asks for the robot check, and NEXT_PUBLIC_TURNSTILE_SITE_KEY isn't set, so no widget is shown and Laravel will refuse it.");
+    }
+  }, [asked]);
+
+  return (
+    <>
+      {honeypot && (
+        // Off the page, and out of the way of a keyboard and a screen reader. Not `hidden`
+        // or display:none: a bot that skips those would skip this too.
+        <div aria-hidden="true" style={{ position: "absolute", left: "-10000px", top: "auto", width: 1, height: 1, overflow: "hidden" }}>
+          <label>
+            Leave this empty
+            <input type="text" name={honeypot} tabIndex={-1} autoComplete="off" defaultValue="" />
+          </label>
+        </div>
+      )}
+      {shown && <div ref={holder} className={className} />}
+    </>
+  );
+}