The first commit, the core and all files is adding to repo

components/DraftEditor.tsx

@@ -0,0 +1,172 @@
+"use client";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { api } from "./StartGame";
+import type { DatasetManifest } from "@/shared/protocol";
+type Draft = {
+  id: string;
+  name: string;
+  description: string;
+  state: string;
+  source: string;
+  map: string | null;
+  manifest: DatasetManifest;
+  previews: { id: string; image: string | null }[];
+};
+export function DraftEditor({ id }: { id: string }) {
+  const [draft, setDraft] = useState<Draft | null>(null),
+    [name, setName] = useState(""),
+    [description, setDescription] = useState(""),
+    [selected, setSelected] = useState<string[]>([]),
+    [error, setError] = useState(""),
+    [message, setMessage] = useState(""),
+    [busy, setBusy] = useState(false);
+  useEffect(() => {
+    api<Draft>("datasets/" + id)
+      .then((d) => {
+        setDraft(d);
+        setName(d.name);
+        setDescription(d.description);
+        setSelected(d.manifest.viewpoints.map((p) => p.id));
+      })
+      .catch((e) => setError(e.message));
+  }, [id]);
+  async function save(submit = false) {
+    setBusy(true);
+    setError("");
+    try {
+      await api(
+        "datasets/" + id,
+        { name, description, selectedIds: selected },
+        "PATCH",
+      );
+      if (submit) {
+        await api("datasets/" + id + "/submit", {});
+        setDraft((d) => (d ? { ...d, state: "review" } : d));
+        setMessage("Submitted for moderator review.");
+      } else setMessage("Draft saved.");
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function cancel() {
+    setBusy(true);
+    try {
+      await api("datasets/" + id + "/cancel", {});
+      setMessage("Processing cancelled.");
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (!draft)
+    return (
+      <p role={error ? "alert" : undefined}>{error || "Loading your draft…"}</p>
+    );
+  const editable = ["draft", "rejected"].includes(draft.state);
+  return (
+    <>
+      <span className="badge">{draft.state}</span>
+      <p className="muted">
+        {draft.source === "plugin"
+          ? "Server-generated views use vanilla terrain and simplified lighting. Entities, shaders, custom packs and dynamic sign text are omitted."
+          : "Player captures show the terrain received by the client. Unexplored map coverage remains blank."}
+      </p>
+      {draft.map && (
+        <div className="detail-map" style={{ maxWidth: 600 }}>
+          <Image
+            src={draft.map}
+            width={1024}
+            height={1024}
+            alt="Draft surface map"
+            unoptimized
+          />
+        </div>
+      )}
+      <label className="field">
+        Map name
+        <input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          disabled={!editable}
+        />
+      </label>
+      <label className="field">
+        Description
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          disabled={!editable}
+        />
+      </label>
+      <h2>Choose your locations.</h2>
+      <p className="muted">
+        Keep at least five clear, useful panoramas. Selected: {selected.length}
+      </p>
+      <div className="preview-grid">
+        {draft.previews.map((p) => (
+          <label key={p.id}>
+            <input
+              type="checkbox"
+              checked={selected.includes(p.id)}
+              disabled={!editable}
+              onChange={(e) =>
+                setSelected((s) =>
+                  e.target.checked
+                    ? [...s, p.id]
+                    : s.filter((id) => id !== p.id),
+                )
+              }
+            />
+            {p.image && (
+              <Image
+                src={p.image}
+                width={512}
+                height={512}
+                alt={`Viewpoint ${p.id}`}
+                unoptimized
+              />
+            )}
+            <span>{p.id}</span>
+          </label>
+        ))}
+      </div>
+      {editable && (
+        <div className="inline-actions">
+          <button
+            className="button"
+            disabled={busy || selected.length < 5}
+            onClick={() => save()}
+          >
+            Save draft
+          </button>
+          <button
+            className="button primary"
+            disabled={busy || selected.length < 5}
+            onClick={() => save(true)}
+          >
+            Submit for review →
+          </button>
+        </div>
+      )}
+      {["uploading", "processing"].includes(draft.state) && (
+        <button className="button" disabled={busy} onClick={cancel}>
+          Cancel processing
+        </button>
+      )}
+      {error && (
+        <p role="alert" className="error-message">
+          {error}
+        </p>
+      )}
+      {message && (
+        <p role="status" className="success-message">
+          {message}
+        </p>
+      )}
+    </>
+  );
+}