Keep draw pen settings inside DrawCanvas

Only the Reader's canvas uses them now. A module-level lastPen keeps the
chosen tool/color/size when Draw mode is toggled off and on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/pages/DrawCanvas.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
-import { useApp } from '../context/AppContext.js';
 import { renderInkToCanvas } from '../utils/inkRender.js';
 
 const INK_COLORS = ['#0f172a', '#ef4444', '#3b82f6', '#16a34a', '#f59e0b', '#a855f7'];
@@ -11,6 +10,9 @@ const INK_SIZES = [
 ];
 const PAGE_HEIGHT = 640; // px per notebook page
 
+// The last pen settings, so toggling Draw mode off and on keeps your choice.
+let lastPen = { tool: 'pen', color: INK_COLORS[0], size: INK_SIZES[0].value };
+
 // Page count is persisted as a hidden metadata stroke at strokes[0]
 // so the canvas size survives navigation without a separate state key.
 function extractMeta(strokes) {
@@ -30,7 +32,10 @@ function packStrokes(realStrokes, pageCount) {
 // headerContent: optional JSX rendered above the notebook area.
 // The canvas extends over it so you can draw directly on the content.
 export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerContent }) {
-  const { drawTool, setDrawTool, drawColor, setDrawColor, drawSize, setDrawSize } = useApp();
+  const [drawTool, setDrawTool] = useState(lastPen.tool);
+  const [drawColor, setDrawColor] = useState(lastPen.color);
+  const [drawSize, setDrawSize] = useState(lastPen.size);
+  useEffect(() => { lastPen = { tool: drawTool, color: drawColor, size: drawSize }; }, [drawTool, drawColor, drawSize]);
 
   const { pageCount: initPages } = extractMeta(strokes);
   const [pageCount, setPageCount] = useState(initPages);