Account export / restore-into-new-tree / delete

New account_service + endpoints under /users/me:
- GET /me/export — zip of every owned tree (account.json + media blobs).
- POST /me/import — restore a backup into NEW trees (ids remapped, media
  re-uploaded); non-destructive, never touches existing data.
- DELETE /me — soft-delete the user, their owned trees, and revoke sessions;
  guarded by retyping the account email.

Settings page wires all three (export download, restore upload, delete with
typed-email confirmation). No migration — uses existing tables + soft-delete.

52 backend tests pass (export→restore round-trip + delete guards); frontend builds.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/app/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 
 import { api } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
@@ -8,6 +9,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 export default function SettingsPage() {
+  const router = useRouter();
   const [me, setMe] = useState<{ display_name: string | null; email: string } | null>(null);
 
   const [current, setCurrent] = useState("");
@@ -16,10 +18,72 @@ export default function SettingsPage() {
   const [msg, setMsg] = useState<{ kind: "ok" | "err"; text: string } | null>(null);
   const [busy, setBusy] = useState(false);
 
+  // Data export / restore / delete.
+  const [exporting, setExporting] = useState(false);
+  const [restoreMsg, setRestoreMsg] = useState<string | null>(null);
+  const [restoring, setRestoring] = useState(false);
+  const restoreRef = useRef<HTMLInputElement>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [deleting, setDeleting] = useState(false);
+
   useEffect(() => {
     api.GET("/api/v1/users/me").then((r) => setMe(r.data ?? null));
   }, []);
 
+  async function exportData() {
+    setExporting(true);
+    const resp = await fetch("/api/v1/users/me/export", { credentials: "include" });
+    if (resp.ok) {
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "provenance-export.zip";
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+    setExporting(false);
+  }
+
+  async function restoreData(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (restoreRef.current) restoreRef.current.value = "";
+    if (!file) return;
+    setRestoring(true);
+    setRestoreMsg(null);
+    const fd = new FormData();
+    fd.append("file", file);
+    const resp = await fetch("/api/v1/users/me/import", {
+      method: "POST",
+      body: fd,
+      credentials: "include",
+    });
+    setRestoring(false);
+    if (resp.ok) {
+      const c = await resp.json();
+      setRestoreMsg(`Restored ${c.trees} tree(s), ${c.persons} people into new trees.`);
+    } else {
+      setRestoreMsg("That doesn't look like a valid Provenance export.");
+    }
+  }
+
+  async function deleteAccount() {
+    if (deleteConfirm !== me?.email) return;
+    setDeleting(true);
+    const fd = new FormData();
+    fd.append("confirm_email", deleteConfirm);
+    const resp = await fetch("/api/v1/users/me", {
+      method: "DELETE",
+      body: fd,
+      credentials: "include",
+    });
+    setDeleting(false);
+    if (resp.ok) {
+      await api.POST("/api/v1/auth/logout");
+      router.push("/register");
+    }
+  }
+
   async function changePassword(e: React.FormEvent) {
     e.preventDefault();
     setMsg(null);
@@ -109,10 +173,55 @@ export default function SettingsPage() {
         <CardHeader>
           <CardTitle className="text-base">Your data</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-5">
+          <div className="space-y-2">
+            <p className="text-sm text-[var(--muted)]">
+              Download a complete backup of every tree you own — people, sources, media, and
+              all — as a zip.
+            </p>
+            <Button variant="outline" onClick={exportData} disabled={exporting}>
+              {exporting ? "Preparing…" : "Export all my data"}
+            </Button>
+          </div>
+
+          <div className="space-y-2 border-t border-[var(--border)] pt-4">
+            <p className="text-sm text-[var(--muted)]">
+              Restore a backup. It’s imported into <strong>new</strong> trees — nothing existing
+              is touched or overwritten.
+            </p>
+            <input ref={restoreRef} type="file" accept=".zip" onChange={restoreData} className="hidden" />
+            <Button variant="outline" onClick={() => restoreRef.current?.click()} disabled={restoring}>
+              {restoring ? "Restoring…" : "Restore from backup"}
+            </Button>
+            {restoreMsg && <p className="text-sm text-bronze">{restoreMsg}</p>}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="border-red-300/60">
+        <CardHeader>
+          <CardTitle className="text-base text-red-700">Delete account</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
           <p className="text-sm text-[var(--muted)]">
-            Full-account export, restore, and account deletion are coming next.
+            This deletes your account, the trees you own, and signs you out everywhere. Export
+            your data first if you might want it. Type <strong>{me?.email}</strong> to confirm.
           </p>
+          <div className="flex max-w-sm flex-col gap-2">
+            <Input
+              placeholder="your email"
+              value={deleteConfirm}
+              onChange={(e) => setDeleteConfirm(e.target.value)}
+            />
+            <Button
+              variant="ghost"
+              className="bg-red-600 text-white hover:bg-red-700 hover:text-white"
+              onClick={deleteAccount}
+              disabled={deleting || deleteConfirm !== me?.email}
+            >
+              {deleting ? "Deleting…" : "Permanently delete my account"}
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </div>