Verse of the day with picture backgrounds, shareable image, and study covers

- Verse of the day: card over a picture (a different one each day, or chosen),
  12 drawn scenes plus photos from public/verse-backgrounds, and "Share as
  image" (also on the Reader's verse panel) that saves or shares a PNG with the
  same background, a theme look, or a photo from the device
- Study cards get a cover banner named for the book, coloured by kind of book
- Outline "Build from my notes": abbreviations like "A.D. 63." no longer end a
  sentence

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

src/components/reader/VerseSheet.jsx

@@ -10,6 +10,7 @@ import { diffVerses, differenceLabel } from '../../utils/textDiff.js';
 import { DiffText } from './DiffText.jsx';
 import { HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
 import { useIqAvailable } from '../../hooks/useIq.js';
+import VerseShareImage from '../VerseShareImage.jsx';
 import IqLexicon from '../iq/IqLexicon.jsx';
 import IqStudyAids from '../iq/IqStudyAids.jsx';
 
@@ -160,6 +161,7 @@ export default function VerseSheet({
   const TABS = iqOn ? [...BASE_TABS, ['aids', 'Study aids']] : BASE_TABS;
   const [tab, setTab] = useState('commentary');
   const [copied, setCopied] = useState(false);
+  const [imageOpen, setImageOpen] = useState(false);
   const [preview, setPreview] = useState(null); // the cross-reference being read in the panel
   const appliedRequest = useRef(0);
   // Leaving this verse closes the preview; a cross-reference tapped in the text opens it here. (Tracks the
@@ -177,7 +179,7 @@ export default function VerseSheet({
     }
   }, [verse?.number, request?.n]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { if (verse && tab === 'refs') onLoadCrossRefs(); }, [verse?.number, tab]); // eslint-disable-line react-hooks/exhaustive-deps
-  useEffect(() => { setCopied(false); }, [verse?.number]);
+  useEffect(() => { setCopied(false); setImageOpen(false); }, [verse?.number]);
   if (!verse) return null;
 
   const copy = () => {
@@ -201,12 +203,21 @@ export default function VerseSheet({
               <span className="block h-4 w-4 rounded-full border border-black/10" style={{ backgroundColor: bookmarkColor }} />
             </button>
           )}
+          <button type="button" onClick={() => setImageOpen((o) => !o)} aria-pressed={imageOpen} className={`${actionBtn} text-xs`} aria-label="Share verse as image" title="Share as image">
+            Image
+          </button>
           <button type="button" onClick={copy} className={actionBtn} aria-label="Copy verse">
             {copied ? <span className="px-1 text-xs">Copied</span> : <CopyIcon />}
           </button>
         </>
       )}
     >
+      {imageOpen && (
+        <div className="mb-3">
+          <VerseShareImage text={verse.text} reference={`${bookName} ${chapter}:${verse.number}`} translation={translation}
+            notice={READER_TRANSLATIONS.find((t) => t.id === translation)?.notice ?? ''} onClose={() => setImageOpen(false)} />
+        </div>
+      )}
       {onHighlightVerse && (
         // One-tap highlighting of the whole verse (to mark just some words, select them in the text)
         <div className="mb-3 flex flex-wrap items-center gap-1.5" role="group" aria-label="Highlight this verse">