Add PWA support and expandable draw canvas

PWA:
- manifest.json with name, icons, theme/background color, standalone display
- PNG icons (192, 512, 180 apple-touch) generated via pure Node.js (no deps)
- index.html: manifest link, theme-color, apple-mobile-web-app-* meta tags,
  viewport-fit=cover for iPhone notch/Dynamic Island
- service worker extended to cache app shell (static assets + index.html)
  with network-first for navigation, cache-first for hashed assets,
  network-first-with-cache-fallback for external Bible APIs

Expandable canvas:
- "Add More Space" button below each draw canvas adds a full notebook page
- Existing ink rescales to preserve visual pixel positions (no stretching)
- Page count embedded as metadata in the strokes array so it survives
  navigation without a separate state key

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

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "name": "Bible Study Project",
+  "short_name": "Bible Study",
+  "description": "Your personal verse-by-verse Bible study companion",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#f8fafc",
+  "theme_color": "#0f172a",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

public/sw.js

@@ -1,36 +1,80 @@
-const CACHE = 'bible-api-v1';
-const CACHEABLE = ['https://bible.helloao.org', 'https://bolls.life'];
+const SHELL = 'bible-shell-v1';
+const API   = 'bible-api-v1';
+const BIBLE_ORIGINS = ['https://bible.helloao.org', 'https://bolls.life'];
 
-self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(SHELL)
+      .then(c => c.addAll(['/', '/index.html']))
+      .then(() => self.skipWaiting())
+  );
+});
 
-self.addEventListener('activate', (event) => {
-  event.waitUntil(
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
     caches.keys()
-      .then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))))
+      .then(keys => Promise.all(
+        keys.filter(k => k !== SHELL && k !== API).map(k => caches.delete(k))
+      ))
       .then(() => self.clients.claim())
   );
 });
 
-// Network-first, fall back to cache for external Bible API requests.
-self.addEventListener('fetch', (event) => {
-  if (!CACHEABLE.some(origin => event.request.url.startsWith(origin))) return;
+self.addEventListener('fetch', (e) => {
+  const { request } = e;
+  const url = request.url;
 
-  event.respondWith(
-    fetch(event.request)
-      .then(response => {
-        if (response.ok) {
-          const clone = response.clone();
-          caches.open(CACHE).then(cache => cache.put(event.request, clone));
-        }
-        return response;
-      })
-      .catch(() =>
-        caches.open(CACHE)
-          .then(cache => cache.match(event.request))
-          .then(cached => cached ?? new Response('{"error":"offline"}', {
-            status: 503,
-            headers: { 'Content-Type': 'application/json' },
-          }))
+  // Never intercept API routes — let Express handle them
+  if (new URL(url).pathname.startsWith('/api/')) return;
+
+  // External Bible API: network-first, fall back to cache
+  if (BIBLE_ORIGINS.some(o => url.startsWith(o))) {
+    e.respondWith(
+      fetch(request)
+        .then(res => {
+          if (res.ok) caches.open(API).then(c => c.put(request, res.clone()));
+          return res;
+        })
+        .catch(() =>
+          caches.open(API).then(c => c.match(request)).then(
+            hit => hit ?? new Response('{"error":"offline"}', {
+              status: 503, headers: { 'Content-Type': 'application/json' },
+            })
+          )
+        )
+    );
+    return;
+  }
+
+  // App-shell navigation: network-first, fall back to cached index.html
+  if (request.mode === 'navigate') {
+    e.respondWith(
+      fetch(request)
+        .then(res => {
+          if (res.ok) caches.open(SHELL).then(c => c.put(request, res.clone()));
+          return res;
+        })
+        .catch(() =>
+          caches.open(SHELL).then(c =>
+            c.match('/index.html').then(hit => hit ?? c.match('/'))
+          )
+        )
+    );
+    return;
+  }
+
+  // Same-origin static assets (hashed JS/CSS/images): cache-first
+  if (url.startsWith(self.location.origin)) {
+    e.respondWith(
+      caches.open(SHELL).then(c =>
+        c.match(request).then(hit => {
+          if (hit) return hit;
+          return fetch(request).then(res => {
+            if (res.ok) c.put(request, res.clone());
+            return res;
+          });
+        })
       )
-  );
+    );
+  }
 });