Share verse / OG card

Sharing a Bible verse on WhatsApp or other platforms should produce a visually polished image — not just a plain URL. This feature generates a branded verse card as an SVG image and lets users share it directly or download it as a PNG. Social platforms that support Open Graph also pick up the image automatically when the chapter URL is shared.

• Triggered from the verse context menu as a "Share" action, opening a modal overlay.
• Three share actions available:
  1. WhatsApp — opens wa.me deep-link with verse text (truncated to 200 chars), reference, and chapter URL.
  2. Copy Link — writes the chapter URL (/read/{bookId}/{chapter}) to the clipboard.
  3. Download Image — fetches the SVG card, rasterises it to a 1200×630 PNG via <canvas>, and triggers a file download named {bookName}-{chapter}-{verse}.png.
• A live preview of the OG card is shown inside the modal before sharing.
• Modal closes on Escape key or clicking the backdrop.

• Modal: fixed, centered, min(90vw, 500px) wide, dark popup background (rgb(20, 18, 35)), rounded corners.
• Header shows verse reference. Close button top-right.
• Card preview rendered as a full-width <img> sourcing the /api/og/... endpoint directly.
• Action buttons in a horizontal row: WhatsApp button is green (#25d366); Copy and Download use the standard translucent button style.
• Card visual: 1200×630 SVG with a deep navy-to-indigo gradient background, purple corner accents, decorative opening quote mark, centered verse text in Georgia serif, italic scripture reference below a thin separator, and a small "BIBLEWEB" brand label at the bottom.

Component: apps/web/src/lib/components/bible/ShareModal.svelte

• Props: verse: Verse, bookName: string, onclose: () => void
• OG URL: /api/og/{verse.bookId}/{verse.chapter}/{verse.verse}
• Share URL: {window.location.origin}/read/{verse.bookId}/{verse.chapter}

API Route: apps/web/src/routes/api/og/[bookId]/[chapter]/[verse]/+server.ts

• GET handler — returns an SVG string with Content-Type: image/svg+xml.
• Fetches verse text from the database via getVerse(bookId, chapter, verseNum).
• Word-wraps text at 50 chars/line, truncates at 12 lines with an ellipsis.
• Aggressive cache headers: public, max-age=604800, s-maxage=2592000 — verse text is treated as immutable.
• Self-contained static book name map (66 books, no i18n module import needed).

SVG styling:

• Background: linearGradient from #12122a → #1a1a3e → #0f1525
• Central glow: radialGradient with 12% opacity purple
• Text: Georgia serif, 28px, #e8e0d5; reference: 22px italic #a78bfa
• Corner accents: #a78bfa lines; outer border stroke #7c3aed at 35% opacity

Fully implemented. OG route, SVG generator, and share modal are all in place. PNG download via canvas rasterisation is working. The WhatsApp and copy-link flows are functional. Verify that the modal is wired up correctly in the verse context menu.