Native-feel pass: PWA integration, system back, offline, haptics, undo

Mobile only (<=639px / coarse pointers); desktop keeps its behaviour.

System integration
- Manifest: id, display_override, monochrome icon, Make my homework
  shortcut and a share target (text/URL via GET, files via POST).
  iOS startup images for the common iPhone sizes. Pinch-zoom is allowed
  again (double-tap zoom is disabled via touch-action instead).
- Share target: /share chooser with New deck / Make my homework; POSTed
  files wait in a 10-minute in-memory store, reach the wizard through
  sessionStorage and never touch disk.
- Web Share: Share rows for decks (JSON file where supported) and the
  homework result, with a clipboard fallback and a toast.
- Offline: a quiet pill appears and Freeze / mode cards are disabled
  with a clear reason; input is never lost (error cards keep Retry).
- State: wizard drafts (text, options, photos up to a size budget)
  survive reloads and OS kills and are cleared on success; re-tapping
  the active tab scrolls to the top; the deck page shows a skeleton
  instead of a spinner.

Navigation and gestures
- System Back closes the topmost layer first: a small history-entry
  stack (lib/use-back-close.ts) covers the drawer, Settings sheet,
  install sheet, deck actions panel and one wizard step; navigations
  are never rewound and stale entries are skipped.
- Destructive-but-reversible actions use Undo toasts: deleting a deck
  (no confirm) and removing a file in the wizard. Irreversible ones
  keep their confirm.

Input and feedback
- Every phone input got inputmode / enterkeyhint / autocomplete /
  autocapitalize / spellcheck; Enter on the last field advances the
  wizard; a clipboard-paste button appears where the API exists.
- Haptics behind a Settings toggle (on by default): tab switches,
  toggles, correct/wrong, completion; Vibration API + the iOS hidden
  switch tick, throttled and silent everywhere else.
- Wake lock during the study feed and homework guide, released on
  leave and re-acquired when the tab returns.

Verified: new native suite 35/35 (manifest/head/viewport, offline,
share target GET + POST, back-gesture layers, undo, share fallback,
tab re-tap, haptics persistence, draft restore), regression 74/74,
mobile 52/52, wizard 80/80, declutter 116/116, animation 8/8,
i18n 25/25. Lint + build clean. SW freezmo-v23.

Needs a real device (documented in the README): iOS haptic tick,
system share sheet entry, wake-lock grant, iPhone startup images,
iOS edge-swipe back, install prompts. Pull-to-refresh and the app
badge were skipped on purpose.

components/SettingsDialog.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { AnimatePresence, motion, useDragControls, useReducedMotion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 
 import { LOCALES, useI18n, type Locale } from "@/lib/i18n";
+import { haptic } from "@/lib/haptics";
 import { springSheet } from "@/lib/motion";
+import { clearApiKey, saveSettings, settingsStore } from "@/lib/settings";
+import { useBackClose } from "@/lib/use-back-close";
 import { cn } from "@/lib/utils";
 import { openInstallSheet, useInstallAvailable } from "@/lib/install";
-import { clearApiKey, saveSettings } from "@/lib/settings";
 import { useHealth } from "@/lib/use-health";
 import {
   AlertTriangleIcon,
@@ -37,6 +39,13 @@ export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () =
   const { health, loading, error, refresh, apiKey, checkedAt } = useHealth();
   const installAvailable = useInstallAvailable();
   const { locale, setLocale, t, plural } = useI18n();
+  const settings = useSyncExternalStore(
+    settingsStore.subscribe,
+    settingsStore.getSnapshot,
+    settingsStore.getServerSnapshot,
+  );
+  /* The system Back gesture closes the sheet instead of leaving the page. */
+  useBackClose(open, onClose);
   const [keyDraft, setKeyDraft] = useState(apiKey);
   const [reveal, setReveal] = useState(false);
   const [saved, setSaved] = useState(false);
@@ -221,7 +230,10 @@ export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () =
                             key={entry.id}
                             type="button"
                             aria-pressed={locale === entry.id}
-                            onClick={() => setLocale(entry.id)}
+                            onClick={() => {
+                              haptic("toggle");
+                              setLocale(entry.id);
+                            }}
                             className={cn("relative", phone && "seg-slide")}
                           >
                             {phone && locale === entry.id ? <SegmentedPill layoutId="language-pill" /> : null}
@@ -306,6 +318,42 @@ export function SettingsDialog({ open, onClose }: { open: boolean; onClose: () =
                           </p>
                         </div>
                       </details>
+
+                      {/* haptics: best-effort vibration feedback */}
+                      <div className="flex items-center justify-between gap-3 border-t border-[var(--hairline-soft)] pt-3">
+                        <span className="min-w-0">
+                          <span className="block text-[13px] font-semibold text-[var(--text)]">
+                            {t("settings.haptics")}
+                          </span>
+                          <span className="block text-[11.5px] leading-snug text-[var(--text-subtle)]">
+                            {t("settings.hapticsNote")}
+                          </span>
+                        </span>
+                        <button
+                          type="button"
+                          role="switch"
+                          aria-checked={settings.haptics}
+                          aria-label={t("settings.haptics")}
+                          onClick={() => {
+                            saveSettings({ haptics: !settings.haptics });
+                            haptic("toggle");
+                          }}
+                          className={cn(
+                            "touch-target relative h-7 w-12 shrink-0 rounded-full border transition-colors",
+                            settings.haptics
+                              ? "grad-ice border-transparent"
+                              : "border-[var(--hairline)] bg-[var(--surface-sunken)]",
+                          )}
+                        >
+                          <span
+                            aria-hidden
+                            className={cn(
+                              "absolute top-1/2 size-5 -translate-y-1/2 rounded-full bg-white shadow transition-[left] duration-200",
+                              settings.haptics ? "left-6" : "left-0.5",
+                            )}
+                          />
+                        </button>
+                      </div>
                     </section>
 
                     {/* ----------------------------------------------- install */}