Sync Canvas LMS export feature + refreshed Settings screenshot

Brings the share build up to date with the main project: QTI .zip export
and optional direct Canvas API push, plus the Canvas settings card.

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

app/editor/[id]/page.jsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import QuestionCard from "@/components/QuestionCard";
+import CanvasExportDialog from "@/components/CanvasExportDialog";
 import { QUESTION_TYPES, blankQuestion, totalPoints } from "@/lib/schema";
 import { exportTxt, exportDoc, exportClipboard, exportPrint } from "@/lib/exporter";
 
@@ -19,6 +20,7 @@ export default function EditorPage() {
   const [verifying, setVerifying] = useState(false);
   const [addOpen, setAddOpen] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
+  const [canvasOpen, setCanvasOpen] = useState(false);
   const [error, setError] = useState("");
   const [profile, setProfile] = useState({});
   const toastTimer = useRef(null);
@@ -272,10 +274,14 @@ export default function EditorPage() {
                   <button className="btn btn-sm" onClick={() => doExport("copy", true)}>Copy</button>
                 </div>
                 <div className="field-label">Complete packet — student + answer key</div>
-                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
                   <button className="btn btn-sm" onClick={() => doExport("print", "packet")}>Print / PDF</button>
                   <button className="btn btn-sm" onClick={() => doExport("doc", "packet")}>Word</button>
                 </div>
+                <div className="field-label">Canvas (LMS)</div>
+                <button className="btn btn-sm" onClick={() => { setExportOpen(false); setCanvasOpen(true); }}>
+                  Set up &amp; download .zip…
+                </button>
               </div>
             )}
           </div>
@@ -350,6 +356,15 @@ export default function EditorPage() {
         </span>
       </div>
 
+      {canvasOpen && (
+        <CanvasExportDialog
+          assignment={a}
+          onClose={() => setCanvasOpen(false)}
+          onDone={() => { setCanvasOpen(false); showToast("Downloaded Canvas .zip"); }}
+          onError={(msg) => { setCanvasOpen(false); setError(msg); }}
+        />
+      )}
+
       {toast && <div className="toast">{toast}</div>}
     </div>
   );